javascript_javascript スキルで DOM ツリーを順番にたどる方法

DOM ツリーは、ドキュメント内のすべてのノード (要素ノード、テキスト ノード、コメント ノードなど) で構成されるツリー構造です。DOM ツリーの解析と構築は、ブラウザによって実装される重要な機能です。 DOM ツリーはツリー構造であるため、ツリー構造をトラバースする関連メソッドを使用して DOM ツリーをトラバースできます。同時に、DOM2 の「Traversal」モジュールには 2 つの新しいタイプが用意されているため、DOM を簡単に実行できます。ツリーの事前注文トラバースが実装されました。

注: この記事の 5 つのメソッドはすべて DOM (深さ優先トラバーサル) の事前順序トラバーサル メソッドであり、要素タイプのみに焦点を当てています。

1. DOM1 の基本インターフェースを使用して DOM ツリーを再帰的に走査します

DOM1 は、基本タイプのノードにいくつかの API を提供し、これを通じていくつかの基本的な DOM 操作を完了できます。 DOM ツリーを再帰的に走査するコードは比較的単純です。基本的な考え方は、最初に現在のノードを処理してから、子ノードを左から右に再帰的に走査することです。

/**
  * 使用递归的方式先序遍历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. DOM1 の基本インターフェースを使用して DOM ツリーを反復的に走査します

最初の方法とは異なり、今回は DOM ツリーを走査するために反復方法が使用されます。 DOM ツリーを走査するための反復の使用は比較的複雑です。重要な点は、現在のノードが処理されるときに、ノードの最初の Element 子ノードがルート ノードとして使用されることです。次のサイクルの、現在のノードの他の子要素ノードを右から左の順序でスタックにプッシュします。現在のノードに Element 子ノードがない場合は、ルート ノードが取得できなくなるまで、スタックから Element ノードを次のサイクルのルート ノードとしてポップします。コードは次のとおりです:

/**
 * 使用迭代的方式先序遍历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. DOM 拡張機能の要素トラバーサル API を使用して、DOM ツリーを再帰的に走査します

DOMElement Traversal API は、DOM トラバーサルを容易にするいくつかのインターフェイスを提供し、ノードの Element 子ノードを簡単に取得できるようにします。 「DOM 拡張: DOM API のさらなる強化 [概要 - 前編]」のセクション 2 では、DOM 拡張の Element Traversal API が紹介されています。コードは次のとおりです:

/**
 * 使用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. NodeIterator を使用する

DOM2 の「Traversal」モジュールは、DOM ツリーの事前順序トラバーサルを簡単に実装するために使用できる NodeIterator タイプを提供します。ここでは、「JavaScript Advanced Programming, Third Edition」のセクション 12.3.1 でこのタイプについて説明します。直接コードは次のように与えられます:

/**
 * 使用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. TreeWalker を使用します

TreeWalker 型は、NodeIterator 型の拡張バージョンであると言えます。「JavaScript Advanced Programming, Third Edition」のセクション 12.3.2 では、この型も次のように直接記述しています。

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

上記は、皆さんと共有するために DOM ツリーを走査するための JavaScript メソッドです。皆さんの学習に役立つことを願っています。