How to calculate the depth of the DOM tree?

1. What is DOM (Document Object Model (Document Object Model))

The W3C DOM standard is divided into 3 different parts:

Core DOM-standard model for any structured document
XML DOM-standard model for XML documents
HTML DOM-Standard model for HTML documents

What is HTML DOM?

HTML standard object model
HTML standard programming interface
W3C standard

HTML DOM defines the objects and attributes of all HTML elements, as well as the methods to access them.

2. What is a DOM node

**According to the W3C HTML DOM standard, all content in an HTML document is a node: **According to the definition in the Red Book: DOM can describe any HTML or XML document as a structure composed of multiple layers of nodes.

The entire document is a document node
Each HTML element is an element node
The text inside the HTML element is a text node
Each HTML attribute is an attribute node
Comment is a comment node

The following is the HTML DOM node tree:
Insert picture description here

3. Common DOM node types

Node type
- Each node has a nodeType attribute, used to indicate the type of node
- You can use the two attributes nodeName and nodeValue to understand the specific information of the node
- Each node has a childNodes attribute, which holds a NodeList object. NodeList is an array-like object used to store a set of ordered nodes
- Each node has a parentNode attribute
- Commonly used methods of operating nodes, appendChild() removeChild() etc.
The Document type
js represents a document through the Document type; in the browser, the document object is an instance of HTMLDocument, representing the entire HTML page , and the document object is an attribute of the window object, so it can be accessed as a global object.
- The shortcut to access the child nodes of the Document node documentElement: This attribute always points to the element in the HTML page; childNodesaccess to the document element through the list.document.documentElement === document.childNodes[0] // true(两者都指向<html>元素)
- document.body , Points to the element
- Common DOM applications: Find elements: getElementById(),getElementsByTagName()
- The output stream is written to the page: write(), writeIn()(difference between the two is that the former will be written as it is, which adds a line feed end of the string (\ n-))
Element type
- The Element type is used to represent XML and HTML elements, providing access to element tag names, child nodes, and characteristics

var div = document.getElementById("myDiv");
alert(div.id)  //  "myDiv"
div.id = "someOtherId"

Each element has one or more characteristics . The main DOM methods for operating characteristics are:getAttribute() setAttribute() removeAttribute()

var div = document.getElementById("myDiv");
alert(div.getAttribute("id"))  //  "myDiv"

Element type is attributesthe only DOM node type that uses attributes. attributesThe attribute contains a NameNodeMap, which is similar to the NodeList. Each feature of the element is represented by an Attr node, and each node is stored in the NameNodeMap. The NameNodeMap object has some methods:: getNameItem(name)return the node removeNameItem(name)whose nodeName attribute is equal to name;: remove the node whose nodeName attribute is equal to name from the list

var id = element.attributes.getNameItem("id").nodeValues;

You can create new elements through the document.createElement() method

Write here temporarily.

4. How to calculate the depth of the DOM tree

Reference: Native JS seeking the maximum depth of the DOM tree

<html lang="en">
  <body>
    <div>
      <div>
        <p>
          <span><span></span></span>
        </p>
        <p></p>
        <p><span></span></p>
      </div>
    </div>
  </body>
</html>

<script>
   // 求dom树的最大深度
    const getDepth = (node => {
      if (!node.childNodes || node.childNodes.length === 0) {
        return 1;
      }
    const maxChildrenDepth = [...node.childNodes].map(v => getDepth(v));
    return 1 + Math.max(...maxChildrenDepth);
    })
    console.log(getDepth(document.documentElement));
  </script>

Supplement: The difference between children and childNodes