How to traverse the DOM tree in order in javascript

The DOM tree is a tree structure composed of all nodes in the document (element nodes, text nodes, comment nodes, etc.). 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 the related methods of traversing the tree structure to traverse the DOM tree. At the same time, the "Traversal" module in DOM2 provides two new types, so that the DOM can be easily implemented. Preorder traversal of the tree.

Note: The five methods in this article are all pre-order traversal methods of the DOM (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 some basic DOM operations can be completed. The code for recursively traversing the DOM tree is relatively simple. The core idea is to process the current node first, and then recursively traverse the child nodes from left to right. The code is as follows:

/**
  * 使用递归的方式先序遍历DOM树
  * @param node 根节点
  */
 function traversal(node){
   //对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){
       //递归先序遍历子节点
       traversal(item);
     }
   }
 }

2. Use the basic interface of DOM1 to iteratively traverse the DOM Tree

Different from the first method, this time an iterative method is used to traverse the DOM tree. Using iteration to traverse the DOM tree is relatively complicated. The key point is to use a stack to maintain the access path of the node. When the current node is processed, the first Element child node of the node is first used as the root node of the next cycle, and according to Push other child element nodes of the current node onto the stack in order from right to left. If the current node does not have an Element child node, pop an Element node from the stack as the root node of the next cycle until the root node cannot be obtained. The code is as follows:

/**
 * 使用迭代的方式先序遍历DOM树
 * @param 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 DOM extended Element Traversal API to recursively traverse the DOM tree

DOMElement Traversal API provides several interfaces to facilitate DOM traversal, making it easier to obtain a The Element child node of the node. In Section 2 of "DOM Extension: Further Enhancement of DOM API [Summary - Part 1]", the Element Traversal API of DOM extension is introduced. The code is as follows:

/**
 * 使用DOM扩展的Traversal API提供的新的接口先序遍历DOM树
 * @param 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. Using NodeIterator

The "Traversal" module of DOM2 provides the NodeIterator type, which can be used to easily implement pre-order traversal of the DOM tree, "JavaScript Advanced Programming Section 12.3.1 of "Third Edition" introduces this type. We give the code directly here as follows:

/**
 * 使用DOM2的"Traversal"模块提供的NodeIterator先序遍历DOM树
 * @param 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. Using TreeWalker

The TreeWalker type can be said to be an enhanced version of the NodeIterator type. Section 12.3.2 of "JavaScript Advanced Programming, Third Edition" introduces this type. We also directly give the code here as follows:

/**
 * 使用DOM2的"Traversal"模块提供的TreeWalker先序遍历DOM树
 * @param 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 of javascript that is shared with you to traverse the DOM tree in order. I hope it will be helpful to everyone's study.

For more articles related to JavaScript’s method of pre-order traversal of the DOM tree, please pay attention to the PHP Chinese website!