JavaScript Document createTreeWalker() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word CREATETREEWALKER

Definition

document.createTreeWalker() returns a TreeWalker rooted at a node. Use whatToShow and an optional filter to pick which nodes are “visible”, then move with nextNode(), firstChild(), and friends (MDN).

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.createTreeWalker. Start with this line.

JavaScript
createTreeWalker(root, whatToShow?, filter?)
CallWhat it does
createTreeWalker(root, whatToShow?, filter?)Primary signature.
document.createTreeWalker(...)Call with the arguments your case needs.

Built into the browser. Call createTreeWalker(...) on document — no import required.

Library declarations
JavaScript
createTreeWalker(root, whatToShow?, filter?)

Parameters

ParameterDescription
rootRequired. Subtree root; initial currentNode
whatToShowOptional. Bitmask of node types (default: all)
filterOptional. Callback or { acceptNode }

Return Value

Return ValueDescription
*TreeWalker

JavaScript Examples

Example 1 — Walk Text Nodes

MDN pattern: SHOW_TEXT + nextNode() under a root.

JavaScript
const root = document.createElement("div");
root.innerHTML = "Hi JS";

const tw = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
const parts = [];
while (tw.nextNode()) {
  parts.push(tw.currentNode.data.trim());
}

console.log(parts.join("|")); // "Hi|JS"
Try It Yourself

How It Works

  1. Build a small tree. Root holds a text node and a span.
  2. Create the walker. SHOW_TEXT hides elements.
  3. Loop nextNode(). Each call advances to the next text node.
  4. Read currentNode.data. Collect trimmed text pieces.

Example 2 — Filter Elements

Accept only SPAN nodes; skip everything else.

JavaScript
const root = document.createElement("div");
root.innerHTML = "
A
BC";

const tw = document.createTreeWalker(
  root,
  NodeFilter.SHOW_ELEMENT,
  (node) =>
    node.tagName === "SPAN"
      ? NodeFilter.FILTER_ACCEPT
      : NodeFilter.FILTER_SKIP
);

const tags = [];
while (tw.nextNode()) {
  tags.push(tw.currentNode.tagName);
}

console.log(tags.join(",")); // "SPAN,SPAN"
Try It Yourself

How It Works

  1. Show elements only. SHOW_ELEMENT ignores text.
  2. Filter callback. ACCEPT for SPAN, SKIP for others.
  3. SKIP keeps children. Nested spans under a skipped parent can still match.
  4. Collect tag names. Only accepted nodes appear in the loop.

Example 3 — firstChild() Tree Move

firstChild() jumps to the first visible child (depends on whatToShow).

JavaScript
const root = document.createElement("div");
root.innerHTML = "HiJS";

const all = document.createTreeWalker(root, NodeFilter.SHOW_ALL);
const els = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);

console.log(all.firstChild().nodeName); // "#text"
console.log(els.firstChild().nodeName); // "SPAN"
Try It Yourself

How It Works

  1. Same root, two masks. One shows all nodes; one shows elements.
  2. SHOW_ALL. The first visible child is often a text node (MDN).
  3. SHOW_ELEMENT. Text is invisible, so firstChild() returns SPAN.
  4. Tree moves matter. This is why TreeWalker is more than a flat iterator.
Compatibility

Browser Support

Document.createTreeWalker() is Baseline Widely available (MDN). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

Document.createTreeWalker()

Supported in every modern browser. A few legacy NodeFilter SHOW_* flags are inert — ignore them.

99% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
document.createTreeWalker() Excellent

Bottom line: Safe everywhere. Focus on whatToShow, filter semantics, and whether you need tree moves versus createNodeIterator.

Frequently Asked Questions

MDN: Document.createTreeWalker() returns a newly created TreeWalker object rooted at a given Node, optionally filtered by whatToShow and a filter callback.
No. MDN marks Document.createTreeWalker() as Baseline Widely available. It is not Deprecated, Experimental, or Non-standard. A few NodeFilter SHOW_* flags are Legacy and no longer effective.
A new TreeWalker object (MDN). TreeWalker.currentNode starts as the root you passed in.
Both walk a filtered subtree. TreeWalker also supports tree-shaped moves such as parentNode, firstChild, lastChild, previousSibling, and nextSibling. Prefer createNodeIterator for a simple forward nextNode loop.
MDN: an optional bitmask from NodeFilter constants (for example SHOW_TEXT or SHOW_ELEMENT). It defaults to SHOW_ALL (0xFFFFFFFF).
MDN: FILTER_ACCEPT includes the node; FILTER_REJECT excludes that node and its whole subtree; FILTER_SKIP excludes only that node (descendants may still be visited).

Next: elementFromPoint()

Learn how to find the topmost element at a given point on the page.

elementFromPoint() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document createTouchList() Method JavaScript Document elementFromPoint() Method