Before WE get to DOM, let’s talk about object classification

First of all, there are several different types of JS objects, but the DOM is often referred to as the host object, regardless of the main ones. Internal objects: Array, Boolean, Date, Function, Global, Math, Error…. Host object: objects provided by the running JS script environment, including window, Document, FormDate, XMLHttpRequest… First, window corresponds to the knowledge related to BOM object, and document corresponds to the knowledge related to DOM, which is the document object model. The DOM is actually part of the BOM, but we often refer to DOM as a special item

The document method

First of all, document is an object. From a JS point of view, it represents a document itself. It is the top of all document nodes.

GetElementById/getElementByTagName, etc

1. document.getElementById('box');// In IE8 and below, it is case insensitive, and in IE8 and below, if you set the name feature to box, there is no id feature, this method can be obtained
2. document.getElementsByClassName('box1');// Internet Explorer 8 and below cannot be used
3. document.getElementByTagName('div')// Good compatibility, all compatible
4. document.getElementByName();// Use very little
Copy the code

In modular development, ids are often used to inject data from the back end to the front end. In these methods, called hooks, only getElementById() returns an element. The rest return an array of classes

querySelector/querySelectorAll

This is a new WEB API in the HTML5 specification.

var div1 = document.querySelector('div');
var div2 = document.querySelector('.text');
var div3 = document.querySelector('div p');
var div4 = document.querySelector('div > p');
var div5 = document.querySelector('#box');
Copy the code

We can see that the selection elements in () are written the same as CSS selectors, and that this method will only return the first element selected if multiple elements are selected

If we want to get multiple elements. You can choose to use the document querySelectorAll var div1 = document. QuerySelectorAll (‘ box ‘); This will return an array of classes containing element nodes, even if you want to get an element with an ID property, it will return an array of classes.

1. Poor performance

2. Not real time, or not the return value is static and does not change once the initial value is determined

Such as:

var divs = document.querySelectorAll('div');
console.log(divs);//[div, div, div]
divs[0].remove();
console.log(divs);//[div, div, div] is not real-time
Copy the code

Element node tree

It is important to note that a node tree is not equal to a tree of element nodes, but contains a tree of element nodes.Good compatibility), and there are separate methods for accessing the element node document.

Access the properties of the node (all node types)

Access nodes method commonly used have parentNode /.childnodes, firstChild/lastChild, previousSibling/nextSibling

ParentNode (parentNode)

Write the corresponding code in the editor:

<ul>
    <li>
        <h2>I'm the title tag</h2>
        <a href="">I'm the hyperlink tag</a>
        <p>I'm the paragraph tag</p>
     </li>
 </ul>
Copy the code
var a=document.getElementsByTageName('a') [0];
Copy the code

Enter the following code on the browser console to get the following result:

As you can see,document is the top of all document nodes

childNodes

Write the corresponding code in the editor:

<ul>
    <li>
        <! -- This is a comment -->
        <h2>I'm the title tag</h2>
        <a href="">I'm the hyperlink tag</a>
        <p>I'm the paragraph tag</p>
     </li>
 </ul>
Copy the code
var li=document.getElementsByTageName('li') [0];
console.log(li.childNodes.length);
Copy the code

The console output is:

This also shows that nodes are not only element nodes, but also other nodes where the node type can be represented by a number: 1. Element node === 1 2. Attribute node === 2 3. Text node === 3 4. Document === 9 6.DocumentFragment === 11

FirstChild /lastChild (first /last node)

The HTML code is the same as above, and the js code is as follows:

var li = document.getElementsByTagName('li') [0];
console.log(li.lastChild); //#text
Copy the code

The first node in the element/the last node in the element works the same way as above

nextSibling/previousSibing

var p=document.getElementsByTageName('p') [0];
console.log(p.previousSibling);//#text
Copy the code

The last node of the element itself/the next node of the element works the same way

Gets the attributes of the element node

Access to the attribute of element nodes generally have: parentElement/children, firstElementChild/lastElementChild, nextElementSibing/previousElementSibing

ParentElement (not supported by Internet Explorer 9 and below)

The top of the element node in the document is the HTML element

Children (child element nodes, not supported by IE7 and below)

<div class="div1">
    <p>This is the first P tag</p>
    <p class="div2">This is the second P tag</p>
    <span>This is a span</span>
</div>
Copy the code
    var div1 = document.getElementsByClassName('div1') [0];
    console.log(div1.children);
Copy the code

The result is:

FirstElementChild/lastElementChild (ie 9 and the following does not support)

To view firstElementChild, js changes the code as follows:

    var div1 = document.getElementsByClassName('div1') [0];
    console.log(div1.firstElementChild);
Copy the code

The result is:

To view the lastElementChild, js changes the code as follows:

    var div1 = document.getElementsByClassName('div1') [0];
    console.log(div1.lastElementChild);
Copy the code

The result is:

NextElementSibling/previousElementSibling (ie 9 and the following does not support)

To view nextElementSibling, js is modified as follows:

    var p = document.getElementsByClassName('p2') [0];
    console.log(p.nextElementSibling);
Copy the code

The results are as follows:

In order to view previousElementSibling, js is modified as follows:

    var p = document.getElementsByClassName('p2') [0];
    console.log(p.previousElementSibling);
Copy the code

The results are as follows:

DOM is the document object model, the host object in THE JS object, DOM is associated with the document, the relevant methods with the common document document. The getElementById, document getElementsByClassName, Document. The getElementsByTagName, document. GetElementsByName

  1. The document.getElementById method that gets the element name in parentheses is case insensitive in IE8 and below, and if you set the name property to box on your element, there is no id property, you can get it with this method.
  2. Document. The getElementsByClassName method in IE8 and below
  3. Document. The getElementByTagName compatibility is very good, are compatible
  4. Document. GetElementByName with very little

Node contains element node and other nodes, access to various types of property have parentNode /.childnodes, firstChild/lastChild, nextSibling/previousSibling, Obtain element node attributes such as parentElement(not supported by IE9 and below), children(not supported by IE7 and below), FirstElementChild/lastElementChild (ie 9 and the following does not support), nextElementSibing/previousElementSibing (ie 9 and the following does not support)