ホームページ ウェブフロントエンド jsチュートリアル javascript_javascript スキルで DOM ツリーを順番にたどる方法

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

May 16, 2016 pm 03:13 PM

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 メソッドです。皆さんの学習に役立つことを願っています。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

' this' JavaScriptで? ' this' JavaScriptで? Mar 04, 2025 am 01:15 AM

' this' JavaScriptで?

ソースビューアーでjQueryの知識を向上させます ソースビューアーでjQueryの知識を向上させます Mar 05, 2025 am 12:54 AM

ソースビューアーでjQueryの知識を向上させます

モバイル開発用のモバイルチートシート10個 モバイル開発用のモバイルチートシート10個 Mar 05, 2025 am 12:43 AM

モバイル開発用のモバイルチートシート10個

See all articles