So durchlaufen Sie den DOM-Baum der Reihe nach in Javascript

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 vorbestellte Traversal-Methoden von DOM (Tiefen-First-Traversal) und konzentrieren sich nur auf den Elementtyp.

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

DOM1 bietet einige APIs für den Basistyp Node, über die einige grundlegende DOM-Operationen ausgeführt werden können. Der Code zum 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 🎜>2. Verwenden Sie die Basisschnittstelle von DOM1, um den DOM-Baum zu durchlaufen

/**
  * 使用递归的方式先序遍历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);
     }
   }
 }

Im Gegensatz zur 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:

3. Verwenden Sie die DOM-erweiterte Element-Traversal-API, um den DOM-Baum rekursiv zu durchlaufen.

/**
 * 使用迭代的方式先序遍历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();
    }
  }
}

Die DOMElement-Traversal-API bietet mehrere Schnittstellen, um die DOM-Traversierung zu erleichtern bequemer Holen Sie sich den untergeordneten Elementknoten eines Knotens. 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:

4. Verwenden Sie NodeIterator

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

Das „Traversal“-Modul von DOM2 stellt den NodeIterator-Typ bereit, der zur einfachen Implementierung der Vorbestellungsdurchquerung des DOM-Baums verwendet werden kann , „JavaScript Advanced“ Abschnitt 12.3.1 von „Programming Third Edition“ stellt diesen Typ hier direkt vor:

Verwenden von TreeWalker

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

Der TreeWalker-Typ Man kann sagen, dass es sich um den NodeIterator-Typ handelt. Die erweiterte Version von „JavaScript Advanced Programming, Third Edition“ führt diesen Typ in Abschnitt 12.3.2 ein. Wir geben den Code hier auch direkt wie folgt an:

Das Obige ist das Javascript-Vorwort, das ich mit Ihnen teilen möchte. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.

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

Weitere Artikel zur JavaScript-Methode zur Vorbestellungsdurchquerung des DOM-Baums finden Sie auf der chinesischen PHP-Website!