DOM TreeWalker API

DOM TreeWalker API

TreeWalker APIを使用すると、開発者はDOMツリーをトラバースするために使用できるtreeWalkerオブジェクトを作成できます。 treeWalkerには、DOMツリー内のtreeWalkerの現在の位置を移動したり、現在のノードに関する情報を返したりするために使用できるいくつかのメソッドがあります。

TreeWalker APIは、DOMツリーをトラバースするための強力なツールです。これを使用すると、ツリー内を簡単に移動して、遭遇したノードに関する情報を取得できます。 APIは、ノードの次または前の兄弟の取得や親ノードの取得など、一般的な操作のための便利なメソッドも多数提供します。

TreeWalkerAPIの使用例

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      return node.tagName === 'DIV' ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  console.log(treeWalker.currentNode.tagName);
}

上記のコードはTreeWalkerを作成し、これを使用してDOMツリーをトラバースします。 TreeWalkerは、DIV要素であるノードのみを受け入れるため、他のタイプのノードをスキップします。ツリーをトラバースするときに、検出した各DIVノードのタグ名を出力します。これは、ドキュメント内のすべてのDIV要素を見つけるための便利な方法です。

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      // Check if the node is a DIV, and if it has the "my-class" class.
      return node.tagName === 'DIV' && node.classList.contains('my-class') ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  // Do something with the node, such as add a border.
  treeWalker.currentNode.style.border = '1px solid black';
}

上記のコードは前の例と同じですが、「my-class」クラスを持つDIVノードのみを受け入れます。このようなノードに遭遇すると、1pxの黒い境界線が追加されます。これは、TreeWalkerAPIで実行できることの簡単な例です。

（ほぼ）すべて緑

TreeWalker APIを使用する際の課題の1つは、現在のノードを見失いやすいことです。これは、APIが特定のノードを見つけるためのメソッドを提供していないためです。代わりに、ツリー内を移動するためのメソッドを使用する必要がありますが、これには注意が必要です。もう1つの課題は、APIがブラウザーで十分にサポートされていないため、ポリフィルを使用する必要がある場合があることです。

概要

TreeWalker APIは、DOMツリーをトラバースするための強力なツールです。ツリー内を移動したり、現在のノードに関する情報を取得したりするためのさまざまな方法を提供します。 APIは、一般的な操作のためのいくつかの便利なメソッドも提供します。ただし、APIは使いにくい場合があり、ブラウザでは十分にサポートされていません。

DOMデータ検索に関連する他の興味深いAPIは、次のAPIです。これについては、将来取り上げる可能性があります。

• DOM範囲API
• DOM NodeIterator API