Document.createTreeWalker() - TreeWalkerを作成する

2017/10/07

createTreeWalker()は、Documentのメソッドです。TreeWalkerを新しく作成します。createNodeIterator()とcreateTreeWalker()は、作成するオブジェクトが違うだけで、仕組みは同じです。

概要

名前

createTreeWalker

所属

Document

IDL

[NewObject] TreeWalker createTreeWalker(Node root, optional unsigned long whatToShow = 0xFFFFFFFF, optional NodeFilter? filter = null);

仕様書

https://dom.spec.whatwg.org/#dom-document-createtreewalker

説明

引数の詳しい説明はcreateNodeIterator()の項目をご参考下さい。このメソッドと同じルールです。

第1引数(root)には、ルートとなるノードを指定します。このノードとその子孫が、TreeWalkerのメンバーに加わります。

第2引数(whatToShow)には、任意でノードの種類を表す整数、または、NodeFilterの定数を指定します。ここで指定した種類のノード以外はメンバーに加わりません。ビットマスク演算子で任意の数だけ指定できます。

第3引数(filter)には、任意でフィルターの役割を果たすコールバック関数を指定します。関数は検査対象のノードを引数で受け取り、下記のいずれか(整数、または、NodeFilterの定数)の値を返すようにします。

デモ

Document.createTreeWalker()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
	div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<ul id="hoge">
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

<div id="fuga">
	<p><span>SYNCER</span>は<b>ウェブサイト</b>だ。</p>
</div>

<hr>
<div id="result"></div>
<script>
var rootElement = document.getElementById( "hoge" ) ;
var treeWalker = document.createTreeWalker( rootElement ) ;
// var treeWalker = document.createTreeWalker( rootElement, NodeFilter.SHOW_ELEMENT ) ;

console.log( treeWalker ) ;
document.getElementById( "result" ).appendChild( new Text( treeWalker ) ) ;

// TreeWalkerの内容を確認
var referenceNode, i=0 ;

while ( referenceNode = treeWalker.nextNode() ) {
	document.getElementById( "result" ).appendChild( new Text( "[" + i++ + "]" + ": " + referenceNode + "\n" ) ) ;
}
</script>
</body>
</html>