JavaScriptを使用してDOMツリーをフィルタリングおよび走査する方法

JavaScript APIが唯一の使命であることを知っていますか ノードをフィルタリングして繰り返します DOMツリーから欲しい？実際、1つではなく2つのそのようなAPIがあります。 NodeIterator そして TreeWalker. それらは互いに非常に似ていますが、いくつかの有用な違いがあります。両方ともできます ノードのリストを返す に準拠しながら、与えられたルートノードの下に存在する 事前定義済みおよび/またはカスタムのフィルタルール それらに適用される.

APIで利用可能な定義済みフィルタは私たちを助けることができます さまざまな種類のノードをターゲットにする テキストノードや要素ノード、カスタムフィルタ（当社が追加）などがあります。 束をさらに絞り込む, 例えば、特定の内容を持つノードを探すことによって。返されるノードのリストは 反復可能, すなわち彼らはすることができます ループスルー, リスト内の個々のノードすべてを処理できます。.

使い方 NodeIterator API

A NodeIterator オブジェクトを使用して作成することができます createNodeIterator（） の方法 資料 インタフェース。この方法 3つの引数を取ります. 最初のものは必須です。それ”の ルートノード これは、除外したいすべてのノードを保持します。.

2番目と3番目の引数は オプション. 彼らは 定義済みフィルタとカスタムフィルタ, それぞれ。定義済みフィルタは以下のように使用できます。 の定数 NodeFilter 物.

たとえば、 NodeFilter.SHOW_TEXT 2番目のパラメータとして定数が追加されています。 ルートノードの下にあるすべてのテキストノードのリスト. NodeFilter.SHOW_ELEMENT 戻ります 要素ノードのみ. の完全なリストを見る 利用可能なすべての定数.

3番目の引数（カスタムフィルタ）は フィルタを実装する関数.

これが コードスニペットの例：

        
タイトル
 
 これはページラッパーです 
こんにちは
 
お元気ですか?
 
 txt いくつかのリンク    

やりたいと仮定 内部にあるすべてのテキストノードの内容を抽出します。 ＃ラッパー div, これは我々がそれを使っていく方法です NodeIterator：

 var div = document.querySelector（ '＃wrapper'）; var nodeIterator = document.createNodeIterator（div、NodeFilter.SHOW_TEXT）; while（nodeIterator.nextNode（））console.log（nodeIterator.referenceNode.nodeValue.trim（））; [Log]こんにちは[Log] [Log]こんにちは。 [ログ] * / 

の nextNode（） の方法 NodeIterator API 反復可能テキストノードのリストの次のノードを返します。. 私達がそれを使用するとき しながら リスト内の各ノードにアクセスするためにループし、すべてのテキストノードのトリミングされた内容をコンソールに記録します。の referenceNode の財産 NodeIterator 反復子が現在接続しているノードを返します.

あなたが出力で見ることができるように、内容のためにちょうど空のスペースを持ついくつかのテキストノードがあります。私たちはできる カスタムフィルタを使用してこれらの空のコンテンツを表示しない：

 var div = document.querySelector（ '＃wrapper'）; var nodeIterator = document.createNodeIterator（div、NodeFilter.SHOW_TEXT、function（node）return（node.nodeValue.trim（）！== ""）？NodeFilter.FILTER_ACCEPT：NodeFilter.FILTER_REJECT;）; while（nodeIterator.nextNode（））console.log（nodeIterator.referenceNode.nodeValue.trim（））; [Log]こんにちは[Log]こんにちは。 * / 

カスタムフィルタ機能 定数を返します NodeFilter.FILTER_ACCEPTテキストノードが空でない場合, これにより、イテレータが反復するノードのリストにそのノードが含まれるようになります。反対に、 NodeFilter.FILTER_REJECT するために定数が返されます 空のテキストノードを除外する ノードの反復可能リストから.

使い方 TreeWalker API

前述したように、 NodeIterator そして TreeWalker APIは 互いに似ている.

TreeWalker を使用して作成することができます createTreeWalker（） の方法 資料 インタフェース。このメソッドは、 createNodeFilter（）, 3つの引数を取ります： ルートノード、定義済みフィルタ、およびカスタムフィルタ.

もし私達 使用 TreeWalker の代わりにAPI NodeIterator 前のコードスニペットは次のようになります。

 var div = document.querySelector（ '＃wrapper'）; var treeWalker = document.createTreeWalker（div、NodeFilter.SHOW_TEXT、function（node）return（node.nodeValue.trim（）！== ""）？NodeFilter.FILTER_ACCEPT：NodeFilter.FILTER_REJECT;）; while（treeWalker.nextNode（））console.log（treeWalker.currentNode.nodeValue.trim（））; [Log]こんにちは。[Log]こんにちは[Log]お元気ですか。 * / 

の代わりに referenceNode, の currentNode の財産 TreeWalker APIを使用して 反復子が現在接続しているノードにアクセスします。. に加えて nextNode（） 方法, ツリーウォーカー 他の便利な方法があります。の previousNode（） メソッド（にもあります NodeIterator） 前のノードを返します 反復子が現在固定されているノードの.

同様の機能が以下によって実行されます。 parentNode（）, 第一子（）, 最後の子（）, previousSibling（）, そして nextSibling（） メソッドこれらの方法は でのみ利用可能 TreeWalker API.

これがそのコード例です。 ノードの最後の子を出力します 反復子は以下のものに固定されています。

 var div = document.querySelector（ '＃wrapper'）; var treeWalker = document.createTreeWalker（div、NodeFilter.SHOW_ELEMENT）; console.log（treeWalker.lastChild（））; / * output [ログ] 
お元気ですか?
 * / 

選択するAPI

を選択 NodeIterator API、あなたが 単純なイテレータだけが必要 選択したノードをフィルタリングしてループします。そして、 TreeWalker API、あなたが フィルター処理されたノードのファミリーにアクセスする必要がある, 直接の兄弟など.