When a web page is loaded into the browser, the browser first analyzes the HTML Document and then parses the CONTENT of the HTML into the DOM (Document Object Model)

How JS handles web pages – the browser adds document to window.

The DOM is a specification, in other words, the CONTENT, structure, and style of the DOM can be manipulated through the API provided by the DOM, regardless of platform or language development, as long as the specification is followed.

Gets the element/tag

  • The window id numberOr directlyId no.
  • Document. QuerySelector (' # id)
  • I want to find something that satisfies this conditionDocument. QuerySelector (' terms')Such as:document.querySelector('div > span:nth-child(2)');
  • Find all of themDocument. QuerySelectorAll (' conditions') [index]

Document.getelement (s) ByXXX

  • Document. GetElementByld (‘ id ‘)
  • Document. The getElementsByTagName () ‘div’ [0] – all div tags first.
  • Document. GetElementsByClassName () ‘red’ [0] – class class is part of the red.

Get specific elements

  • Get the HTML element —document.documentElement
  • Get the head element —document.head
  • Get the body element —document.body
  • Get the window (window is not an element) — window
  • Get all elements —document.all(This is the sixth Falsy value)

The element obtained is obviously an object, which can be used as a div exampleconsole.dir(div1)Look at the prototype chain.

Node Node

Node.nodetype specifies the type of the MDN Node. NodeType specifies the type of the MDN Node.

  • 1 — Represents the Element Element, also known as Tag.
  • 3 — indicates Text
  • 8 — indicates Comment
  • 9: indicates the Document
  • 11 — DocumentFragment DocumentFragment

Add, delete, change and check nodes

The increasing of the node

  • Create a label node, for example
let div1 = document.createElement('div')
document.createElement('style')
document.createElement('script')
document.createElement('li')
Copy the code
  • Create a text node, for example

Text1 = document.createTextNode(' Hello ')

  • Insert text into the tag, for example
div1.appendChild(text1)
div1.innerText='hello'Or div1. TextContent ='hello'
Div1.appendchild (' hello ')
Copy the code
  • Insert into the page

Tags created by default are in the JS thread and must be inserted into head or body to take effect. Such as the document. The body. The appendChild (div) or has been in the elements of the page. The appendChild (div).

appendChild

An element cannot appear in two places unless a copy is made.

For example, if the page has div#test1 and div#test2, create a div tag and pass

test1.appendChild(div)
test2.appendChild(div)
Copy the code

The div ends up in test2.

Replication node:

div2 = div1.cloneNode(true)
// True in () refers to deep copy, which copies child nodes
Copy the code

The node’s change

  • Change id –div2.id = 'xxx'
  • To change the class:
div.className = 'red' // Overwrite the original content
div.classList.add('green')  // Add green instead of overwriting the original content
div.className += 'blue'  // Instead of overwriting the original content, add blue to the original content
Copy the code
  • Change a style:
div.style = 'color:blue' // Overwrite the original content
div.style.color = 'blue' //
Copy the code
  • On case:

For example, div.style.background — color, because JS does not support a hyphen, is considered div.style.background minus color. So in use will be deleted, and the original in line after the first letter of capital — div. Style. The backgroundColor = ‘blue’.

  • Data attributes:

For example, data-x=test, data-x — attribute name, and test — attribute value.

Add attribute: div.setAttribute (‘data-x’,’test’).

Get the attribute value: div.getAttribute(‘data-x’) or div.dataset.

Change property value: div.dataset. X = ‘XXX’.

  • Read property: Direct. The property nameI get the browser processed value, but.getAttribute(' Attribute name ')You get the exact value.

To change the content

  • Change the text content:div.innerText = 'xxx' 和 div.textContent = 'xxx'
  • Change the HTML content:Div. InnerHTML = '<strong> Important content </strong>'The. InnerHTML cannot contain more than 20,000 characters.
  • Change tags:
div.innerHTML = ' '  / / empty first
div.appendChild(div2) // Add the content
Copy the code
  • Change parent node:newParent.appendChild(div)

Nodes of the check

  • Check the parent node:node.parentNodeornode.parentElement.
  • Query grandfather node:node.parentNode.parentNode
  • Query child node:node.childNodesornode.children, but the latter is more recommended because the former includes Spaces. Both will change in real time as the offspring change, but:let c = document.querySelectorAllThe value of c is not going to change.
  • Query the child node of the same generation:node.parentNode.childNodes 和 node.parentNode.children, you also need to exclude the node itself.
  • Query the eldest child node:node.firstChild.
  • Query the youngest child of a child node:node.lastChild.
  • View previous brother:node.previousSiblingornode.previousElementSibling, the former may consider text as a node, while the latter is limited to elements.
  • View the next node:node.nextSibling 和 node.nextElementSiblingThe former may also mistake text for nodes, while the latter simply refers to elements.
  • Traversal: Take the example of traversing all the elements in a div,
travel1 = (node,fn) = > {
    fn(node)
    if(node.children){
        for(let i = 0; i < node.children.length; i++){ travel1(node.children[i],fn) } } } travel1(div1,(node) = > console.log(node))
Copy the code