Document: createTreeWalker() メソッド

root

Node で、TreeWalker.currentNode の初期値であるTreeWalker オブジェクトのルートを表します。

whatToShow 省略可

unsigned long で、NodeFilter の定数プロパティを組み合わせて作成したビットマスクを表します。特定の型のノードをフィルタリングする便利な方法です。既定値は 0xFFFFFFFF で、これは NodeFilter.SHOW_ALL 定数を表します。

定数	数値	説明
NodeFilter.SHOW_ALL	0xFFFFFFFF	すべて絵のノードを出力します。
NodeFilter.SHOW_ATTRIBUTE	0x2	Attr ノードを出力します。
NodeFilter.SHOW_CDATA_SECTION	0x8	CDATASection ノードを出力します。
NodeFilter.SHOW_COMMENT	0x80	Comment ノードを出力します。
NodeFilter.SHOW_DOCUMENT	0x100	Document ノードを出力します。
NodeFilter.SHOW_DOCUMENT_FRAGMENT	0x400	DocumentFragment ノードを出力します。
NodeFilter.SHOW_DOCUMENT_TYPE	0x200	DocumentType ノードを出力します。
NodeFilter.SHOW_ELEMENT	0x1	Element ノードを出力します。
NodeFilter.SHOW_ENTITY 非推奨	0x20	古いものであり、効果はありません。
NodeFilter.SHOW_ENTITY_REFERENCE 非推奨	0x10	古いものであり、効果はありません。
NodeFilter.SHOW_NOTATION 非推奨	0x800	古いものであり、効果はありません。
NodeFilter.SHOW_PROCESSING_INSTRUCTION	0x40	ProcessingInstruction ノードを出力します。
NodeFilter.SHOW_TEXT	0x4	Text ノードを出力します。

メモ: Attr ノードの親は常に null であるため、TreeWalker.nextNode() や TreeWalker.previousNode() が Attr ノードを返すことはありません。Attr ノードを走査するには、Element.attributes を使用してください。

filter 省略可

コールバック関数または acceptNode() メソッドを持つオブジェクトで、NodeFilter.FILTER_ACCEPT、NodeFilter.FILTER_REJECT、NodeFilter.FILTER_SKIP のいずれかを返します。この関数またはメソッドは、whatToShow フラグによって含まれるものとして受け入れられた root を基点とするサブツリーの各ノードに対して呼び出され、反復可能オブジェクトのリストに含めるかどうかを決定します。

• 返値が NodeFilter.FILTER_ACCEPT の場合、このノードが含まれます。
• 返値が NodeFilter.FILTER_REJECT の場合、このノードの配下のサブツリーにあるすべてのノードが含まれません。
• 返値が NodeFilter.FILTER_SKIP の場合、このノードは含まれません。

新しい TreeWalker オブジェクトです。

この例では、whatToShow を使用してテキストコンテンツを大文字に変換しています。なお、#root 要素の子ノードではないにもかかわらず、#root 要素の子孫のテキストノードも走査されます。

HTML

<div id="root">
  これはテキストノードです。
  <span>そして、これは <code>span</code> 要素です。</span>
</div>

CSS

span {
  background-color: aqua;
}

JavaScript

const treeWalker = document.createTreeWalker(
  document.querySelector("#root"),
  NodeFilter.SHOW_TEXT,
);

while (treeWalker.nextNode()) {
  const node = treeWalker.currentNode;
  node.data = node.data.toUpperCase();
}

結果

この例では filter を使用してテキストコンテンツをエスケープします。テキストノードが .escape 要素の子孫であり、かつ .no-escape 要素の子孫でない場合、そのコンテンツは encodeURI() を使用してエスケープされます。

HTML

<div>
  <div>
    This is not escaped. <span class="escape">But this is escaped.</span>
  </div>
  <div class="escape">This is escaped.</div>
  <div class="no-escape">This is not escaped.</div>
</div>
<hr />
<div class="escape">
  <div>
    This is escaped. <span class="no-escape">But this is not escaped.</span>
  </div>
  <div class="no-escape">This is not escaped.</div>
</div>
<hr />
<div class="no-escape">
  <div>This is not escaped.</div>
  <div class="escape">This is not escaped.</div>
</div>

CSS

div {
  margin: 0.25em 0;
  padding: 0.25em;
}
span {
  display: inline-block;
}

.escape {
  border: dashed;
}
.no-escape {
  border: solid;
}

JavaScript

const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  (node) =>
    node.classList.contains("no-escape")
      ? NodeFilter.FILTER_REJECT
      : node.closest(".escape")
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_SKIP,
);

while (treeWalker.nextNode()) {
  for (const node of treeWalker.currentNode.childNodes) {
    if (node.nodeType === Node.TEXT_NODE && /\S/.test(node.data)) {
      // Exclude whitespace-only text nodes
      node.data = encodeURI(node.data.replace(/\s+/g, " "));
    }
  }
}

結果

• TreeWalker: 関連インターフェイス