DOM

：

：

Document.createTreeWalker() メソッド

　編集：2022.09.02 by T.A.

→、、

新しく TreeWalker オブジェクトを作成して返します。

構文
Document.createTreeWalker(root[, whatToShow[, filter]])
Document 実質 document でしょう。
root この TreeWalker トラバーサル（¶走査？）のルート Node。通常、これはドキュメントが所有する要素になります。
whatToShow 省略可。NodeFilter の定数プロパティを組み合わせて作成されたビットマスクを表す unsigned long。

これは、特定のタイプのノードをフィルタリングする便利な方法です。デフォルトは、SHOW_ALL 定数を表す 0xFFFFFFFF です。

定数 数値 説明
NodeFilter.SHOW_ALL 4294967295（それは unsigned long の最大値です） すべてのノードを表示します。
NodeFilter.SHOW_ATTRIBUTE 非推奨 2 属性 Attr ノードを表示します。これは、ルートとして Attr ノードを持つ TreeWalker を作成する場合にのみ意味があります。この場合、これは、属性ノードが反復またはトラバーサルの最初の位置に表示されることを意味します。属性は他のノードの子になることはないため、ドキュメント ツリーをトラバースするときは表示されません。
NodeFilter.SHOW_CDATA_SECTION 非推奨 8 CDATASection ノードを表示します。
NodeFilter.SHOW_COMMENT 128 Comment ノードを表示します。
NodeFilter.SHOW_DOCUMENT 256 Document ノードを表示します。
NodeFilter.SHOW_DOCUMENT_FRAGMENT 1024 DocumentFragment ノードを表示します。
NodeFilter.SHOW_DOCUMENT_TYPE 512 DocumentType ノードを表示します。
NodeFilter.SHOW_ELEMENT 1 Element ノードを表示します。
NodeFilter.SHOW_ENTITY 非推奨 32 継承。使用できなくなりました。
NodeFilter.SHOW_ENTITY_REFERENCE 非推奨 16 継承。使用できなくなりました。
NodeFilter.SHOW_NOTATION 非推奨 2048 継承。使用できなくなりました。
NodeFilter.SHOW_PROCESSING_INSTRUCTION 64 ProcessingInstruction ノードを表示します。
NodeFilter.SHOW_TEXT 4 Text ノードを表示します。
filter 省略可。NodeFilter。これはメソッド acceptNode を持つオブジェクトであり、これは、whatToShow チェックを通過したノードを受け入れるかどうかを決定するために TreeWalker によって呼び出されます。
戻り値

新しい TreeWalker オブジェクト。

¶イテレーターのような感じ？。

例

次の例では、ボディ内のすべてのノードを通過します。要素ではない非ノードを除外します（`NodeFilter.SHOW_ELEMENT` 値を使用）。残りの各ノードを受け入れ可能としてマークします（acceptNode() メソッドは異なる決定を下す可能性があります）。次に、作成されたツリー ウォーカー イテレータを使用してノード（現在はすべての要素）を進み、それらを配列にプッシュします。 

const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode(node) { return NodeFilter.FILTER_ACCEPT; } }
);

const nodeList = [];
let currentNode = treeWalker.currentNode;

while(currentNode) {
  nodeList.push(currentNode);
  currentNode = treeWalker.nextNode();
}

T=document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);	//document.body中の要素（Element）のみ
O=T.nextNode();	//＝[object]：[object HTMLScriptElement]
D=O.innerText;	//＝LinkTop()
O=T.nextNode();	//＝[object]：[object HTMLSpanElement]
D=O.innerText;	//＝↑
O=T.nextNode();	//＝[object]：javascript:Tadoru()
D=O.innerText;	//＝↑
O=T.nextNode();	//＝[object]：[object HTMLHeadingElement]
D=O.innerText;	//＝DOM
O=T.nextNode();	//＝[object HTMLHeadingElement]
D=O.innerText;	//＝ドキュメント オブジェクト モデル
//…

 
T=document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);	//上記のSPAN要素の中の Element のみ
O=T.nextNode();	//＝[object]：[object Text]
D=O.textContent;	//＝
O=T.nextNode();	//＝[object]：[object Text]
D=O.textContent;	//＝LinkTop()
O=T.nextNode();	//＝[object]：[object Text]
D=O.textContent;	//＝↑
O=T.nextNode();	//＝[object]：[object Text]
D=O.textContent;	//＝
O=T.nextNode();	//＝[object]：[object Text]
D=O.textContent;	//＝DOM
O=T.nextNode();	//＝[object]：[object Text]
D=O.textContent;	//＝：
O=T.nextNode();	//＝[object]：[object Text]
D=O.textContent;	//＝DW("DOM")
O=T.nextNode();	//＝[object]：[object Text]
D=O.textContent;	//＝ドキュメント オブジェクト モデル
//…
テスト