Document.createNodeIterator() - NodeIteratorを作成する
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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● 9+ | ● | ● | ● |
関連記事
- Firefoxでドラッグ操作中にプレビューを表示
- Firefoxで、ドラッグ操作中にゴーストプレビューが表示されない時は、ダミーの転送データを作ってあげましょう。
- Range.commonAncestorContainer
- commonAncestorContainerは、Rangeのプロパティです。始点と終点を共通して含む、最も近い祖先ノードを返します。
- Document.URL
- URLは、Documentのプロパティです。ドキュメントに関連付けられたURLアドレスを返します。Location.hrefと値は同じです。
- Document.visibilityState
- visibilityStateは、Documentのプロパティです。最上位のブラウジングコンテキストが持つドキュメントの表示状態を文字列で返します。