公開日: 2025-07-16
タグ: JavaScript
著者: ダーシノ

TreeWalkerを使ってDOMツリーを効率的に走査する

TreeWalkerオブジェクトでNodeFilterを使うことでDOMツリーを効率的に走査できる。

以下のサンプルコードではNodeFilter.SHOW_ELEMENTでElementノードのみを走査している。ちなみにNodeFilterはenumなのでNodeFilter.SHOW_ELEMENT = 1のようになっている。

<section id="target">
  <p>One</p>
  <div>
    <p>Two</p>
    <div>
      <p>Three</p>
    </div>
  </div>
  <p class="skip">Four</p >
</section>

const target = document.querySelector('#target')

const walker = document.createTreeWalker(
  target,
  NodeFilter.SHOW_ELEMENT,
  (node) => {
    // class="skip"は除外
    return node.classList.contains('skip')
      ? NodeFilter.FILTER_SKIP
      : NodeFilter.FILTER_ACCEPT
  }
)

let current = walker.nextNode()
while (current) {
  console.log(current)
  current = walker.nextNode()
}

1. <p>One</p>
2. (
  <div>
    <p>Two</p>
    <div>
      <p>Three</p>
    </div>
  </div>
)
3. <p>Two</p>
4. <div>
    <p>Three</p>
  </div>
5. <p>Three</p>
6. [SKIP]

他にも NodeFilter.SHOW_TEXTをした場合はテキストノードのみを走査できる。

const walker = document.createTreeWalker(
  target,
  NodeFilter.SHOW_TEXT,
  (node) => {
    // HTMLに含まれるインデントスペースも含まれるので除外する
    return node.textContent.trim() === ''
      ? NodeFilter.FILTER_SKIP
      : NodeFilter.FILTER_ACCEPT
  }
)

let current = walker.nextNode()
while (current) {
  console.log(current.textContent)
  current = walker.nextNode()
}

1. One
2. Two
3. Three
4. Four

TreeWalkerを使ってDOMツリーを効率的に走査する

利用事例