DOM => トラバーサル

ツリーウォーキング

TreeWalkerはジェネレータのようなインターフェイスであり、DOMツリー内のノードを再帰的にフィルタリングすることを容易かつ効率的に行います。

次のコードは、ページ内のすべてのTextノードの値を連結し、結果を出力します。

let parentNode = document.body;
let treeWalker = document.createTreeWalker(parentNode, NodeFilter.SHOW_TEXT);

let text = "";
while (treeWalker.nextNode())
    text += treeWalker.currentNode.nodeValue;

console.log(text); // all text in the page, concatenated

.createTreeWalker関数のシグネチャは、

createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)

パラメータ	詳細
ルート	サブツリーの「ルート」ノードがトラベリングされる
whatToShow	オプションで、どのタイプのノードを表示するかを指定する符号なしlongです。詳細については、NodeFilterを参照してください。
フィルタ	任意、whatToShowチェックを渡した後にノードを考慮する必要があるかどうかを判断するacceptNodeメソッドを持つオブジェクト
entityReferenceExpansion	Obsolete and optional、EntityReferenceを破棄するときに、そのサブツリー全体を同時に破棄する必要があるかどうかを示すBooleanフラグです。

ノードを反復する

NodeIteratorインタフェースは、DOMツリー内のノードを反復処理するためのメソッドを提供します。

このような文書があれば：

<html>
<body>
  <section class="main">
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </section>
</body>
</html>

<li>要素を取得するイテレータを想像することができます：

let root = document.body;
let whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
let filter = (node) => node.nodeName.toLowerCase() === 'li' ? 
  NodeFilter.FILTER_ACCEPT : 
  NodeFilter.FILTER_REJECT;
let iterator = document.createNodeIterator(root, whatToShow, filter);
var node;
while (node = iterator.nextNode()) {
  console.log(node);
}

Mozilla Contributorによって提供された例から、Mozilla Developer Networkのdocument.createNodeIterator()のdocument.createNodeIterator() CC-by-SA 2.5でライセンスされているdocument.createNodeIterator()適合した例。

これは次のようにログに記録されます：

<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>

これはTreeWalkerの iterfaceと似ていますが、 nextNode()とpreviousNode()機能のみを提供します。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

DOM
トラバーサル

サーチ…

ツリーウォーキング

ノードを反復する