What is DOM

Document Object Model (DOM) is a standard programming interface recommended by W3C to deal with extensible markup language (HTML or XML). The W3C has defined a set of DOM interfaces that allow you to change the content, structure, and style of a web page.

Second, the DOM tree

Document: A page is a document, and the DOM uses document to represent elements: all tags in the page are elements, and the DOM uses Element to represent nodes: all content in the page is nodes (tags, attributes, text, comments, etc.), and the DOM uses Node to represent elementsCopy the code

DOM treats all of these things as objects

Get page elements

DOM is primarily used to manipulate elements in our actual development. You can get elements in a page in one of the following ways:

1. Obtain the value by ID

Use the getElementById() method to get an element object with an ID.

document.getElementById('id');

Copy the code

Using console.dir(), we can print the element object we fetch to better view the properties and methods in the object.

2. Obtain it by label name

The getElementsByTagName() method returns a collection of objects with the specified label name.

Document. GetElementsByTagName (' tag name ');Copy the code

Note: (1) Because we get a collection of objects, we need to iterate if we want to manipulate the elements inside. (3) If no element is retrieved, an empty pseudo-array is returned (because no object is retrieved) You can also use getElementsByTagName to get all the children of an element (parent) with the specified tag name, but the parent must be a single object (which element object must be specified). The parent element itself is not included in the fetch.

< div id = "demo" > < ul > < li > hello < / li > < / ul > < ol > < li > hello < / li > < / ol > < / div >Copy the code

For example, to get li in ul above, we can do this

var ul=document.geElementById("demo"); Var li= ul.getelementsBytagName ("li"); // Get all the Li's below the parent elementCopy the code

3, through HTML5 new methods to obtain

1. Document. GetElementsByClassName (" the name of the class "); Document.queryselector (' selector '); / / according to specified selector returns the first element (3) the document. The querySelectorAll (' selector '); // Returns a collection of all element objects based on the specified selectorCopy the code

Example:

The < body > < div class = "box" > the box 1 < / div > < div class = "box" > box 2 < / div > < div id = "nav" > < ul > < li > home page < / li > < li > products < / li > < / ul > < / div > < script > / / 1. GetElementsByClassName according to the name of the class get some elements set var boxs = document. The getElementsByClassName (' box '); Box #nav var firstBox = document.querySelector('.box'); Var nav = document.querySelector('#nav'); / / 4. QuerySelectorAll () returns all objects in the specified selectors var allBox = document. QuerySelectorAll (' box '); Var li = document.querySelector('li'); / / 6. Get all the li tag var lis = document. QuerySelectorAll (" li "); </script> </body>Copy the code

Note:

The selectors in querySelector and querySelectorAll need symbols, such as document.querySelector(‘#nav’);

4. Get special elements (body, HTML)

1. Doucumnet. body // Returns the body element objectCopy the code