JavaScript NodeIterator referenceNode Property

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

Definition

NodeIterator.referenceNode is a read-only property that returns the Node the iterator is anchored to. Per MDN, as nodes are inserted the iterator stays anchored to this reference node.

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

Syntax

Use iterator.referenceNode. Start with this line.

JavaScript
iterator.referenceNode
CallWhat it does
iterator.referenceNodePrimary signature.

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

Library declarations
JavaScript
iterator.referenceNode

Parameters

ParameterDescription
nextNode / previousNodeOptional. Methods that move and update the anchor

Return Value

Return ValueDescription
*Node (anchor)

JavaScript Examples

Example 1 — Read referenceNode on Create

MDN idea: after createNodeIterator, the anchor is usually the root.

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

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

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

How It Works

  1. Create a small tree. A root div with one child.
  2. Build the iterator. Pass that root to createNodeIterator.
  3. Read the anchor. Before any walk, referenceNode equals root.
  4. Inspect the node. nodeName is "DIV" — a real DOM node.

Example 2 — After nextNode()

A successful step updates the anchor to the node just returned.

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

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

const first = it.nextNode();
console.log(first.nodeName);                 // "DIV"
console.log(it.referenceNode === first);     // true

const second = it.nextNode();
console.log(second.nodeName);                // "SPAN"
console.log(it.referenceNode === second);    // true
Try It Yourself

How It Works

  1. First step. With SHOW_ELEMENT, the first match is often the root itself.
  2. Anchor matches return. After nextNode(), referenceNode === first.
  3. Second step. The next element is the first <span>.
  4. Anchor moves again. referenceNode now equals that second node.

Example 3 — referenceNode vs root

root stays fixed for the life of the iterator; referenceNode moves.

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

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

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

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. Walk two steps. Past the root into the child <span>.
  2. Read root. Still "DIV" — the fixed boundary.
  3. Read referenceNode. Now "SPAN" — the current anchor.
  4. Compare them. They differ after you leave the starting node.
Compatibility

Browser & Runtime Support

NodeIterator.referenceNode is marked Baseline Widely available on MDN (since April 2018). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

NodeIterator.referenceNode

Read-only anchor Node. Supported across modern Chrome, Firefox, Safari, and Edge. Available since April 2018 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
referenceNode Excellent

Bottom line: Safe for modern browsers. Pair with pointerBeforeReferenceNode when you need full iterator position state. Avoid deprecated detach().

Frequently Asked Questions

A read-only Node—the anchor the iterator is currently tied to. It updates when you call nextNode() or previousNode().
No. MDN marks NodeIterator.referenceNode as Baseline Widely available (since April 2018). It is not Deprecated, Experimental, or Non-standard.
No. It is read-only. Move the iterator with nextNode()/previousNode(), or create a new NodeIterator.
Usually the root you passed to createNodeIterator—the starting anchor before you walk.
root is the fixed walk boundary set at creation. referenceNode is the moving anchor that updates as you step forward or back.
referenceNode is the anchor Node. pointerBeforeReferenceNode is a boolean saying whether the walk pointer sits before or after that anchor.

Next: root

Learn the fixed subtree root that never moves during a NodeIterator walk.

root 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 pointerBeforeReferenceNode Property JavaScript NodeIterator root Property