JavaScript html dom, javascripthtmldom

JavaScript html dom, javascripthtmldom
With html dom, you can access all elements of JavaScript HTML documents.

Html dom (Document Object Model)

When a webpage is loaded, the browser creates a Document Object Model on the page ).

HTML DOMThe model is constructedObjectTree:

Html dom tree

Through the programmable object model, JavaScript has sufficient capabilities to create dynamic HTML.

• JavaScript can change all HTML elements on the page
• JavaScript can change all HTML attributes on the page
• JavaScript can change all CSS styles on the page
• JavaScript can respond to all events on the page

Search for HTML elements

Generally, you need to operate HTML elements through JavaScript.

To do this, you must first find this element. There are three ways to do this:

• Find HTML elements by id
• Find HTML elements by Tag Name
• Find HTML elements by Class Name

Search for HTML elements by id

The simplest way to search for HTML elements in the DOM is to use the element id.

In this example, find the id = "intro" element:

Instance

Var x = document. getElementById ("intro ");

If this element is found, the method returns the element in the form of an object (in x.

If this element is not found, x contains null.

Search for HTML elements by Tag Name

In this example, find the element id = "main", and then find all <p> elements in the id = "main" element:

Instance

Var x = document. getElementById ("main ");
Var y = x. getElementsByTagName ("p ");

Find HTML elements by Class Name

In this exampleGetElementsByClassNameFunction to find the elements of class = "intro:

Instance

Var x = document. getElementsByClassName ("intro ");