I. Introduction to DOM

A web page is actually a tree

JS uses Document to operate web pages, which is the Document Object Model

The API for getting elements

  • Get any element

     window.idxxx // or directly idxxx
 document.getElementById('idxxx')
 document.getElementsByTagName('div') [0]
 document.getElementsByClassName('red') [0]
 document.querySelector('#idxxx') 
 document.querySelectorAll('.red') [0] // The last two are more commonly used
Copy the code

  • Getting HTML elements

    document.documentElement
Copy the code

  • Get the head element

    document.head
Copy the code

  • Get the body element

    document.body
Copy the code

  • Get Windows (Windows are not elements)

     window
Copy the code

  • Get all elements

    document.all//document.all is the sixth false value (0,NaN, ",null,undefined)
Copy the code

Get the prototype of the element

The element you get is an object

3.1 Differences between nodes and elements

Node includes the following types of nodes, which can be obtained by x. nodetype

  • Element, also known as Tag
  • Text Text
  • Note the Comment
  • Documents documents and so on

3.2 The complete prototype chain of a DIV

4. Add, delete, change and check nodes

4.1 Adding a Node

  • Creating a label node

    let div1 = document.createElement('div')
Copy the code

  • Create a text node

    text1 = document.createTextNode('hello')
Copy the code

  • Inserts text inside the tag

    div1.appendChild(text1)
div1.innerText = 'hello'
div1.textContent ='hello'
Copy the code

    • Tags created by default are in the JS thread and must be placed in the body or head to take effect

    • document.body.appendChild(div1)
AppendChild (div1)
Copy the code

Div #test1,div#test2,div

let div = document.createElement('div')
test1.appendChild(div)
test2.appendChild(div)
Copy the code

A: In test2, an element cannot appear in two places unless it is copied.

4.2 Deleting a Node

parentNode.removeChild// Old method, through the parent node delete
childNode.remove()/ / IE is not compatible
Copy the code

4.3 Modifying a Node

  • Modify the properties
div.className = 'blue' / / modify the class
div.classList.add('red') / / modify the class
div.style = 'width:100px; color:blue' // Change the style to fully override
div.style.width = '200px'// Modify a part of the style
div.style.backgroundColor = 'white' // Use uppercase for everything separated by -
div.dataset.x = 'frank' // Modify the attributes of the custom data-**
Copy the code

  • Modify event handlers

    Div. onclick defaults to null, but if it is changed to a function, the browser will call that function when clicked

    Call via fn.call(div,event)

  • Modify text content

    div.innerText = 'xxx'
div.textContent = 'xxx'
Copy the code

  • Modify HTML content

    div.innerHTML = ' important content '
Copy the code

  • Modify the label

    Div. InnerHTML = "// Empty div.appendChild(div2)// add the contentCopy the code

  • Modifying the parent node

    newParent.appendChild(div)
Copy the code

4.4 Viewing Nodes

  • View the Parent node

    node.parentNode //node.parentElement
Copy the code

  • View the parent node of the parent node

    node.parentNode.parentNode
Copy the code

  • Check the son byte

    node.childNodes//node.children, preferred
Copy the code
    • When the child changes, both change at the same time

  • Checking sibling nodes

    node.parentNode.childNodes / / node. ParentNode. Children, but also ruled out yourself

let siblings = []
let c2 = div2.parentElement.children
for(let i = 0; i<c2.length; i++){if(c2[i] ! == div2){ siblings.push(c[i]) } }Copy the code

  • View the first/last child node

    node.firstChild
node.lastChild
Copy the code

  • View the previous sibling/next sibling

    node.previousSibling
node.nextSibling
Copy the code

  • Iterate over all the elements of a div

    travel = (node, fn) = > {
    fn(node)
    if(node.children){
        for(let i=0; i<node.children.length; i++){ travel(node.children[i], fn) } } } travel(div1,(node) = > console.log(node))
Copy the code

DOM operations cross threads

5.1JS engine Rendering engine

Browsers are divided into rendering engine and JS engine, each of which has its own job, rendering engine can only operate pages, JS engine can only operate JS

document.body.appendChild(div1) // How does this sentence change the page
Copy the code
  • When the browser finds that JS has added a div1 object to the body, it tells the rendering engine to add a div element to the page as well
  • All attributes of the new div element copy the div1 object
  • The browser may or may not merge multiple operations on Div1 into one operation

  • Changes to div1’s standard attributes (ID, className, title) or data-** attributes are synchronized to the page by the browser

  • Non-standard property changes to DIV1 stay in the JS thread and are not synchronized to the page

  • If you have custom attributes that you want to synchronize to the page, use data- as a prefix

5.2 the Property and the Attribute

All div1 properties in the JS thread are called properties; Div1 in the rendering engine corresponds to the attribute of the tag, called an attribute

  • Most of the time, they’re equal
  • If they are not standard attributes, they will only be equal at first, attribute only supports strings, and property supports strings, Boolean types