So durchlaufen Sie den DOM-Baum der Reihe nach in Javascript_Javascript-Kenntnissen

Der DOM-Baum ist eine Baumstruktur, die aus allen Knoten im Dokument besteht (Elementknoten, Textknoten, Kommentarknoten usw.). Das Parsen und Erstellen des DOM-Baums ist eine Schlüsselfunktion, die vom Browser implementiert werden muss. Da der DOM-Baum eine Baumstruktur ist, können wir die entsprechenden Methoden zum Durchlaufen der Baumstruktur verwenden, um den DOM-Baum zu durchqueren. Gleichzeitig bietet das Modul „Traversal“ in DOM2 zwei neue Typen, sodass das DOM einfach sein kann implementiert.

Hinweis: Die fünf Methoden in diesem Artikel sind alle Vorbestellungs-Traversalmethoden von DOM (Depth-First-Traversal) und konzentrieren sich nur auf den Elementtyp.

1. Verwenden Sie die Basisschnittstelle in DOM1, um den DOM-Baum rekursiv zu durchlaufen

DOM1 stellt einige APIs für den Basistyp Node bereit, über die einige grundlegende DOM-Vorgänge ausgeführt werden können. Der Code zum rekursiven Durchlaufen des DOM-Baums ist relativ einfach. Die Kernidee besteht darin, zuerst den aktuellen Knoten zu verarbeiten und dann die untergeordneten Knoten rekursiv von links nach rechts zu durchlaufen. Der Code lautet wie folgt:

/**
  * 使用递归的方式先序遍历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. Verwenden Sie die Basisschnittstelle von DOM1, um den DOM-Baum iterativ zu durchlaufen

Anders als bei der ersten Methode wird dieses Mal eine iterative Methode zum Durchlaufen des DOM-Baums verwendet. Die Verwendung von Iteration zum Durchlaufen des DOM-Baums ist relativ kompliziert. Der entscheidende Punkt besteht darin, einen Stapel zum Verwalten des Zugriffspfads des Knotens zu verwenden. Bei der Verarbeitung des aktuellen Knotens wird zunächst der erste untergeordnete Elementknoten des Knotens verwendet des nächsten Zyklus und entsprechend Schieben Sie andere untergeordnete Elementknoten des aktuellen Knotens in der Reihenfolge von rechts nach links auf den Stapel. Wenn der aktuelle Knoten keinen untergeordneten Elementknoten hat, wird ein Elementknoten als Wurzelknoten des nächsten Zyklus vom Stapel entfernt, bis der Wurzelknoten nicht mehr abgerufen werden kann. Der Code lautet wie folgt:

/**
 * 使用迭代的方式先序遍历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. Verwenden Sie die Element Traversal API der DOM-Erweiterung, um den DOM-Baum rekursiv zu durchlaufen

Die DOMElement Traversal API bietet mehrere Schnittstellen zur Erleichterung der DOM-Traversierung, wodurch es einfacher wird, die untergeordneten Elementknoten eines Knotens zu erhalten. In Abschnitt 2 von „DOM-Erweiterung: Weitere Verbesserung der DOM-API [Zusammenfassung – Teil 1]“ wird die Element Traversal API der DOM-Erweiterung vorgestellt. Der Code lautet wie folgt:

/**
 * 使用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. Verwenden Sie NodeIterator

Das „Traversal“-Modul von DOM2 stellt den NodeIterator-Typ bereit, mit dem sich die Vorbestellung des DOM-Baums problemlos implementieren lässt. Abschnitt 12.3.1 von „JavaScript Advanced Programming, Third Edition“ stellt diesen Typ vor direkt Der Code wird wie folgt angegeben:

/**
 * 使用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. Verwenden Sie TreeWalker

Der TreeWalker-Typ kann als erweiterte Version des NodeIterator-Typs bezeichnet werden. Abschnitt 12.3.2 von „JavaScript Advanced Programming, Third Edition“ stellt diesen Typ auch hier direkt vor:

/**
 * 使用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();
  }
}

Das Obige ist die Javascript-Methode zum Durchqueren des DOM-Baums, um sie mit Ihnen zu teilen. Ich hoffe, sie wird für das Lernen aller hilfreich sein.