How javascript first traverses the DOM tree in sequence

This article mainly introduces five methods to traverse the DOM tree in the first order of javascript, interested friends can refer to a tree structure composed of all nodes (element nodes, text nodes, comment nodes, etc.) in the document in the DOM tree, the parsing and construction of the DOM tree is a key function to be implemented by the browser. Since the DOM tree is a tree structure, we can use methods related to the Traversal tree structure to traverse the DOM tree. At the same time, the "Traversal" module in DOM2 provides two new types, this makes it easy to implement the first-order traversal of the DOM tree.

Note: The five methods in this article are first-order DOM traversal methods (depth-first traversal), and only focus on the Element type.

1. Use the basic interface in DOM1 to recursively traverse the DOM tree

DOM1 provides some APIs for the basic type Node, through which you can complete some basic DOM operations. The code for recursively traversing the DOM tree is relatively simple. The core idea is to first process the current node and then recursively traverse the child node from left to right. The Code is as follows:

/*** Recursively traverse the DOM tree in sequence * @ param node root node */function traversal (node) {// process node if (node & node. nodeType = 1) {console. log (node. tagName);} var I = 0, childNodes = node. childNodes, item; for (; I <childNodes. length; I ++) {item = childNodes [I]; if (item. nodeType = 1) {// recursively traverse the child node in the first order of traversal (item );}}}

2. Use the basic interface of DOM1 to iterate over the DOM tree

Different from the 1st methods, this time we use the iterative method to traverse the DOM tree. It is relatively complicated to traverse the DOM tree by iteration. The key point is to maintain the node access path using a stack. When the current node is processed, first, take the first Element subnode of the node as the root node of the next cycle, and press other child Element nodes of the current node into the stack in the order from right to left. If the current node does not have an Element subnode, an Element node pops up from the stack as the root node of the next cycle until the root node cannot be obtained. The Code is as follows:

/*** Use the iterative method to traverse the DOM tree in sequence * @ param node root node */function traversalIteration (node) {var array = [], I = 0, k = 0, elementCount = 0, len = 0, childNodes, item; while (node! = Null) {console. log (node. tagName); childNodes = node. childNodes; len = node. childNodes. length; elementCount = 0; if (len> 0) {for (I = 0; I <len; I ++) {item = childNodes [I]; if (item. nodeType = 1) {elementCount ++; node = item; break ;}}for (k = len-1; k> I; k --) {item = childNodes [k]; if (item. nodeType = 1) {elementCount ++; array. push (item) ;}}if (elementCount <1) {node = array. pop () ;}} else {node = array. pop ();}}}

3. Use the Element Traversal API extended by DOM to recursively traverse the DOM tree

The DOMElement Traversal API provides several interfaces to facilitate DOM Traversal, so that you can obtain the Element subnode of a node more conveniently. In section 2nd of DOM Extension: Further enhancement of dom api [Conclusion>], we will introduce the Element Traversal API of DOM extension. The Code is as follows:

/*** Use the new interface provided by the DOM extended Traversal API to traverse the DOM tree in sequence * @ param node root node */function traversalUsingTraversalAPI (node) {if (node & node. nodeType = 1) {console. log (node. tagName);} var I = 0, len = node. childElementCount, child = node. firstElementChild; for (; I <len; I ++) {traversalUsingTraversalAPI (child); child = child. nextElementSibling ;}}

4. Use NodeIterator

The "Traversal" module of DOM2 provides the NodeIterator type, which can be used to conveniently implement the first-order Traversal of the DOM tree. This type is described in Section 12.3.1 of the third edition of JavaScript advanced programming, the Code is as follows:

/*** Use NodeIterator provided by the "Traversal" module of DOM2 to traverse the DOM tree in sequence * @ param node root node */function traversalUsingNodeIterator (node) {var iterator = document. createNodeIterator (node, NodeFilter. SHOW_ELEMENT, null, false); var node = iterator. nextNode (); while (node! = Null) {console. log (node. tagName); node = iterator. nextNode ();}}

5. Use TreeWalker

The TreeWalker type can be said to be an enhanced version of the NodeIterator type. This type is introduced in section 12.3.2 of the third edition of JavaScript advanced programming. The code below is also provided:

/*** Use the TreeWalker provided by the "Traversal" module of DOM2 to traverse the DOM tree in sequence * @ param node root node */function traversalUsingTreeWalker (node) {var treeWalker = document. createTreeWalker (node, NodeFilter. SHOW_ELEMENT, null, false); if (node & node. nodeType = 1) {console. log (node. tagName);} var node = treeWalker. nextNode (); while (node! = Null) {console. log (node. tagName); node = treeWalker. nextNode ();}}

The above is the method to traverse the DOM tree in the first order of javascript that we share with you. I hope this will be helpful for your learning.

For more articles about how javascript first traverses the DOM tree in sequence, refer to the PHP Chinese website!