Document.createNodeIterator() - NodeIteratorを作成する

2017/10/07

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

概要

名前

createNodeIterator

所属

Document

IDL

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

仕様書

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

説明

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

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

値	定数	説明
0xFFFFFFFF	NodeFilter.SHOW_ALL	全てのノード。
0x1	NodeFilter.SHOW_ELEMENT	Element
0x2	NodeFilter.SHOW_ATTRIBUTE	Attr
0x4	NodeFilter.SHOW_TEXT	Text
0x8	NodeFilter.SHOW_CDATA_SECTION	CDATASection
0x40	NodeFilter.SHOW_PROCESSING_INSTRUCTION	ProcessingInstruction
0x80	NodeFilter.SHOW_COMMENT	Comment
0x100	NodeFilter.SHOW_DOCUMENT	Document
0x200	NodeFilter.SHOW_DOCUMENT_TYPE	DocumentType
0x400	NodeFilter.SHOW_DOCUMENT_FRAGMENT	DocumentFragment

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

値	定数	説明
0xFFFFFFFF	NodeFilter.SHOW_ALL	このノードを弾かない。
2	NodeFilter.FILTER_REJECT	このノードを子孫ごと弾く。
3	NodeFilter.FILTER_SKIP	このノードだけを弾く。子孫は弾かない。

チュートリアル

引数で、そのメンバーとなるノードを取捨して下さい。まず、第1引数で最上位のノードを指定します。例えば、ul要素を指定した場合、ul要素とその子孫だけがメンバーとなります。

<body>
	<ul id="hoge">
		<li>りんご</li>
		<li>みかん</li>
		<li>メロン</li>
	</ul>
	<div>
		<p><span>SYNCER</span>は<b>ウェブサイト</b>だ。</p>
	</div>
</body>

var root = document.getElementById( "hoge" ) ;
var nodeIterator = document.createNodeIterator( root ) ;

// NodeIteratorのメンバー (先頭から順)
// <ul id="hoge"> ... </ul> (要素)
// <ul id="hoge">と<li>の間にある改行文字・タブ文字 (テキスト)
// <li>りんご</li> (要素)
// "りんご" (テキスト)
// <li>りんご</li>と<li>みかん</li>の間にある改行文字・タブ文字 (テキスト)
// <li>みかん</li> (要素)
// "みかん" (テキスト)
// <li>みかん</li>と<li>メロン</li>の間にある改行文字・タブ文字 (テキスト)
// <li>メロン</li> (要素)
// "メロン" (テキスト)
// <li>メロン</li>と</ul>の間にある改行文字・タブ文字 (テキスト)

第2引数では、ノードの種類でフィルターをかけることができます。ビットマスク演算子を利用して下さい。例えば下記は、要素(Element)以外はメンバーに加えない、という指定になります。

var nodeIterator = document.createNodeIterator( root, NodeFilter.SHOW_ELEMENT ) ;

// NodeIteratorのメンバー (先頭から順)
// <ul id="hoge"> ... </ul> (要素)
// <li>りんご</li> (要素)
// <li>みかん</li> (要素)
// <li>メロン</li> (要素)

// ビットマスク演算子の例
	// 単独指定
	// NodeFilter.SHOW_ELEMENT	(ノードが要素の場合のみ、メンバーに入れる)

	// OR条件
	// NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT	(ノードが要素、または、テキストの場合のみ、メンバーに入れる)

	// AND条件
	// NodeFilter.SHOW_ELEMENT & NodeFilter.SHOW_TEXT	(ノードが要素、かつ、テキストの場合のみ、メンバーに入れる)

第3引数にはフィルターの関数を指定します。この関数の返り値がNodeFilter.SHOW_ALLにならないノードをメンバーから弾くことができます。

var nodeIterator = document.createNodeIterator( root, NodeFilter.SHOW_ELEMENT, function ( node ) {
	// nodeのタグ名がli要素じゃなかったら弾く
	if ( node.tagName === "LI" ) {
		return NodeFilter.SHOW_ALL ;
	} else {
		return NodeFilter.FILTER_SKIP ;
	}
} ) ;

// NodeIteratorのメンバー (先頭から順)
// <li>りんご</li> (要素)
// <li>みかん</li> (要素)
// <li>メロン</li> (要素)

デモ

Document.createNodeIterator()のデモです。

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

<!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 nodeIterator = document.createNodeIterator( rootElement ) ;
// var nodeIterator = document.createNodeIterator( rootElement, NodeFilter.SHOW_ELEMENT ) ;

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

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

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