Comment parcourir l'arborescence DOM dans l'ordre en 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 5 méthodes de cet article sont toutes des méthodes de traversée 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 de manière récursive l'arborescence DOM

DOM1 fournit des API pour le type de base Node, à travers lesquelles certaines opérations de base du DOM peuvent être effectuées. Le code pour utiliser la récursion pour parcourir 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 l'arborescence DOM

Différent de la première méthode, cette fois l'arborescence DOM est parcourue à l'aide d'une méthode itérative. 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, un nœud Element est extrait 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 étendue du 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, ce qui en fait plus pratique Obtenez le nœud enfant 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. Utiliser NodeIterator

Le module "Traversal" de DOM2 fournit le type NodeIterator, qui peut être utilisé pour implémenter facilement un parcours de pré-commande du Arbre DOM, "JavaScript Advanced" Section 12.3.1 de "Programming Third Edition" introduit ce type directement ici 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();
  }
}

Utilisation de TreeWalker

Le. Le type TreeWalker peut être considéré comme le type NodeIterator. La version améliorée de "JavaScript Advanced Programming, Third Edition" introduit ce type dans la section 12.3.2. Nous donnons é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 préface javascript à partager avec vous. La méthode de parcours de l'arborescence DOM, j'espère qu'elle sera utile à l'apprentissage de chacun.

Pour plus d'articles liés à la méthode JavaScript de traversée en précommande de l'arborescence DOM, veuillez faire attention au site Web PHP chinois !