JavaScript NodeIterator nextNode() Method

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

Definition

NodeIterator.nextNode() returns the next node in the iterator’s set and advances the position (MDN). The first call returns the first node. When nothing remains, it returns null.

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

Syntax

Call iterator.nextNode. Start with this line.

JavaScript
iterator.nextNode()
CallWhat it does
iterator.nextNode()Primary signature.
iterator.nextNode(...)Call with the arguments your case needs.

Built into the browser. Call nextNode(...) on a NodeIterator — no import required.

Library declarations
JavaScript
iterator.nextNode()

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Next Node, or null

JavaScript Examples

Example 1 — First Call

The first nextNode() returns the first node in the set.

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

const it = document.createNodeIterator(
  box,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode() { return NodeFilter.FILTER_ACCEPT; } }
);

const node = it.nextNode();
console.log(node.nodeName); // DIV
Try It Yourself

How It Works

  1. Create a root. box is the iterator root.
  2. Show elements. SHOW_ELEMENT includes the root.
  3. Call once. First result is usually the root itself.
  4. Read nodeName. Confirms you got DIV.

Example 2 — While Until Null

Count every element until nextNode() returns null.

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

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

let count = 0;
let node;
while ((node = it.nextNode())) count++;

console.log(count); // 3 (div + two spans)
Try It Yourself

How It Works

  1. Build the tree. One root and two child elements.
  2. Loop. Assign and test in the while condition.
  3. Stop on null. That means the walk is finished.
  4. Count. Root + children → 3.

Example 3 — Text Nodes Only

Use SHOW_TEXT so nextNode() skips elements.

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

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

const parts = [];
let node;
while ((node = it.nextNode())) parts.push(node.data);

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

How It Works

  1. Set whatToShow. Only text nodes are candidates.
  2. Walk. Elements are skipped automatically.
  3. Read data. Each text node’s string content.
  4. Tip. See also whatToShow.

Example 4 — referenceNode Updates

Each successful step moves the iterator’s reference.

JavaScript
const box = document.createElement("div");
box.innerHTML = "<b>1</b><i>2</i>";

const it = document.createNodeIterator(box, NodeFilter.SHOW_ELEMENT);
it.nextNode(); // DIV
it.nextNode(); // B

console.log(it.referenceNode.nodeName); // B
Try It Yourself

How It Works

  1. Step twice. Move past the root to <b>.
  2. Read position. referenceNode tracks the current node.
  3. Matches last return. After the second call it is B.
  4. More detail. See referenceNode.

Example 5 — Custom Filter

Only nodes your filter accepts are returned by nextNode().

JavaScript
const box = document.createElement("div");
box.innerHTML =
  '<span class="pick">A</span><span>skip</span><span class="pick">B</span>';

const it = document.createNodeIterator(box, NodeFilter.SHOW_ELEMENT, {
  acceptNode(node) {
    return node.classList && node.classList.contains("pick")
      ? NodeFilter.FILTER_ACCEPT
      : NodeFilter.FILTER_REJECT;
  }
});

const picked = [];
let node;
while ((node = it.nextNode())) picked.push(node.textContent);

console.log(picked.join(",")); // A,B
Try It Yourself

How It Works

  1. Accept only .pick. Other elements are rejected.
  2. Root may be skipped. The root div has no class.
  3. Collect matches. Only the two marked spans appear.
  4. Tip. See filter for more filter options.
Compatibility

Browser Support

NodeIterator.nextNode() is marked Baseline Widely available on MDN (since July 2015). DOM API — not a Node.js built-in.

✓ Baseline · Widely available

nextNode()

Walk forward through filtered DOM nodes across modern browsers. Stop when the method returns null.

98% Core tag support
Chrome 1+
Full support
Edge 12+
Full support
Firefox 1+
Full support
Safari 3+
Full support
Opera ✓
Full support
HTML element 100% supported

Bottom line: Safe for production. Create a NodeIterator, call nextNode() until null, and skip deprecated detach().

Frequently Asked Questions

The next node in document order within the iterator’s set, or null when no nodes remain. The first call returns the first node in the set.
No. MDN marks NodeIterator.nextNode() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
When you have reached the end of the walk — there are no more nodes left after whatToShow and filter screening.
Yes. Each successful call advances the iterator and updates referenceNode (and pointerBeforeReferenceNode).
nextNode() moves forward in document order; previousNode() moves backward. Both return a Node or null at the ends of the walk.
Old specs said detach() could invalidate the iterator and cause INVALID_STATE_ERR. Modern browsers treat detach() as a no-op and usually do not throw — still avoid detach() in new code.

Next: previousNode()

Walk backward through the same NodeIterator set.

previousNode() →

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)

8 people found this page helpful

JavaScript NodeIterator detach() Method JavaScript NodeIterator previousNode() Method