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 ⁨2015年7月⁩.

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

構文

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

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

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

css

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

結果

仕様書

Specification
DOM # dom-document-createtreewalker

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月22日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content