Document: createTreeWalker() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Document.createTreeWalker() 作成メソッドは、新しく作成された TreeWalker オブジェクトを返します。

構文

js
createTreeWalker(root)
createTreeWalker(root, whatToShow)
createTreeWalker(root, whatToShow, filter)

引数

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 の使用

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

HTML

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

CSS

css
span {
  background-color: aqua;
}

JavaScript

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

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

結果

filter の使用

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

HTML

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

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

JavaScript

js
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, " "));
    }
  }
}

結果

仕様書

Specification
DOM Standard
# dom-document-createtreewalker

ブラウザーの互換性

BCD tables only load in the browser

関連情報