Comment parcourir l'arborescence DOM dans l'ordre en compétences javascript_javascript

L'arborescence DOM est une structure arborescente composée de tous les nœuds du document (nœuds d'éléments, nœuds de texte, nœuds de commentaires, etc. L'analyse et la construction de l'arborescence DOM sont une fonction clé à implémenter par le navigateur. Puisque l'arborescence DOM est une structure arborescente, nous pouvons utiliser les méthodes associées de parcours de la structure arborescente pour parcourir l'arborescence DOM. En même temps, le module "Traversal" dans DOM2 fournit deux nouveaux types, afin que le DOM puisse être facilement. implémenté. Parcours de précommande de l’arbre.

Remarque : les cinq méthodes de cet article sont toutes des méthodes de parcours de pré-commande du DOM (traversée en profondeur en premier) et se concentrent uniquement sur le type Element.

1. Utilisez l'interface de base de DOM1 pour parcourir récursivement l'arborescence DOM

DOM1 fournit des API pour le type de base Node, via lesquelles certaines opérations de base du DOM peuvent être effectuées. Le code pour parcourir récursivement l'arborescence DOM est relativement simple. L'idée principale est de traiter d'abord le nœud actuel, puis de parcourir récursivement les nœuds enfants de gauche à droite :
.

/**
  * 使用递归的方式先序遍历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. Utilisez l'interface de base de DOM1 pour parcourir de manière itérative l'arborescence DOM

Différent de la première méthode, cette fois une méthode itérative est utilisée pour parcourir l'arborescence DOM. L'utilisation de l'itération pour parcourir l'arborescence DOM est relativement compliquée.Le point clé est d'utiliser une pile pour conserver le chemin d'accès du nœud. Lorsque le nœud actuel est traité, le premier nœud enfant Element du nœud est d'abord utilisé comme nœud racine. du cycle suivant, et selon Pousser les autres nœuds d'éléments enfants du nœud actuel sur la pile dans l'ordre de droite à gauche. Si le nœud actuel n'a pas de nœud enfant Element, supprimez un nœud Element de la pile en tant que nœud racine du cycle suivant jusqu'à ce que le nœud racine ne puisse pas être obtenu. Le code est le suivant :

/**
 * 使用迭代的方式先序遍历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. Utilisez l'API Element Traversal de l'extension DOM pour parcourir de manière récursive l'arborescence DOM

L'API DOMElement Traversal fournit plusieurs interfaces pour faciliter la traversée du DOM, facilitant ainsi l'obtention des nœuds enfants Element d'un nœud. Dans la section 2 de « Extension DOM : amélioration supplémentaire de l'API DOM [Résumé - Partie 1] », l'API Element Traversal de l'extension DOM est présentée. Le code est le suivant :

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

Le module "Traversal" de DOM2 fournit le type NodeIterator, qui peut être utilisé pour implémenter facilement un parcours de pré-commande de l'arborescence DOM. La section 12.3.1 de "JavaScript Advanced Programming, Third Edition" présente ce type. directement Le code est donné comme suit :

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

Le type TreeWalker peut être considéré comme une version améliorée du type NodeIterator La section 12.3.2 de « JavaScript Advanced Programming, Third Edition » présente également directement le code ici comme suit :

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

Ce qui précède est la méthode javascript pour parcourir l'arborescence DOM afin de partager avec vous. J'espère que cela sera utile à l'apprentissage de chacun.