JavaScript NodeIterator root Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ROOT

Definition

NodeIterator.root is a read-only property that returns the Node at the root of what the iterator traverses—the same node you passed to createNodeIterator(). Per MDN, it represents that fixed walk boundary.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use iterator.root. Start with this line.

JavaScript
iterator.root
CallWhat it does
iterator.rootPrimary signature.

Built into the browser. Read iterator.root on a NodeIterator — no import required.

Library declarations
JavaScript
iterator.root

Parameters

ParameterDescription
Root node at createRequired. First arg to createNodeIterator
nextNode / previousNodeOptional. Move inside the subtree; do not change root

Return Value

Return ValueDescription
*Node (walk root)

JavaScript Examples

Example 1 — root Is document.body

MDN idea: pass document.body and read the same node back.

JavaScript
const it = document.createNodeIterator(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: () => NodeFilter.FILTER_ACCEPT }
);

console.log(it.root === document.body); // true
console.log(it.root.nodeName);          // "BODY"
Try It Yourself

How It Works

  1. Pass the root. document.body is the first argument.
  2. Create the iterator. The browser stores that node as the walk boundary.
  3. Read it back. it.root === document.body is true.
  4. Inspect the node. nodeName is "BODY".

Example 2 — Root a Specific Element

Scope the walk to a small subtree instead of the whole page.

JavaScript
const box = document.createElement("div");
box.id = "box";
box.innerHTML = "<span>A</span>";

const it = document.createNodeIterator(box, NodeFilter.SHOW_ELEMENT);

console.log(it.root.id);                 // "box"
console.log(it.root === box);            // true
Try It Yourself

How It Works

  1. Build a small tree. A div#box with one child.
  2. Pass that element. It becomes the iterator boundary.
  3. Read root.id. Confirms the scoped root is "box".
  4. Why it helps. Smaller roots mean fewer nodes and clearer demos.

Example 3 — root Stays Fixed During a Walk

After two steps, root is unchanged while referenceNode has moved.

JavaScript
const box = document.createElement("div");
box.innerHTML = "<span>A</span><b>B</b>";

const it = document.createNodeIterator(box, NodeFilter.SHOW_ELEMENT);
const rootBefore = it.root;

it.nextNode(); // DIV (root)
it.nextNode(); // SPAN

console.log(it.root === rootBefore);           // true
console.log(it.root.nodeName);                 // "DIV"
console.log(it.referenceNode.nodeName);        // "SPAN"
console.log(it.root === it.referenceNode);     // false
Try It Yourself

How It Works

  1. Save the root. Store it.root before walking.
  2. Step twice. First hit is often the root element; second is a child.
  3. Compare root. It still equals rootBefore.
  4. Compare anchor. referenceNode now points at SPAN, not root.
Compatibility

Browser & Runtime Support

NodeIterator.root is marked Baseline Widely available on MDN (since July 2015). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

NodeIterator.root

Read-only fixed walk root. Supported across modern Chrome, Firefox, Safari, and Edge. Available since July 2015 per MDN Baseline.

98% Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Bun Supported · JavaScript runtime
Supported
Deno Supported · JavaScript runtime
Supported
Node.js Supported · Server runtime
Supported
Android WebView Supported · Modern WebView
Full support
root Excellent

Bottom line: Safe for modern browsers. Use root to confirm the subtree boundary; use referenceNode for the current walk position.

Frequently Asked Questions

A read-only Node—the root of the subtree the iterator traverses. It is the node you passed as the first argument to document.createNodeIterator().
No. MDN marks NodeIterator.root as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
No. root is read-only and stays fixed for the life of the iterator. Create a new NodeIterator with a different root if you need another subtree.
root is the fixed walk boundary set at creation. referenceNode is the moving anchor that updates when you call nextNode() or previousNode().
No. Walking updates referenceNode and pointerBeforeReferenceNode, but root always points at the original root node.
Pass the smallest subtree you need—for example getElementById('list') instead of document.body—to limit the walk and keep results easy to follow.

Next: whatToShow

Learn the NodeFilter bitmask that controls which node types the iterator visits.

whatToShow property →

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)

9 people found this page helpful

JavaScript NodeIterator referenceNode Property JavaScript NodeIterator whatToShow Property