JavaScript NodeIterator previousNode() Method

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

Definition

NodeIterator.previousNode() returns the previous node in the iterator’s set and moves the position backward (MDN). When you are already at the first node, it returns null.

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

Syntax

Call iterator.previousNode. Start with this line.

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

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

Library declarations
JavaScript
iterator.previousNode()

Parameters

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

Return Value

Return ValueDescription
*Previous Node, or null

JavaScript Examples

Example 1 — Backtrack After nextNode()

MDN’s classic pattern: advance, then reverse one step.

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 current = it.nextNode();
const previous = it.previousNode();
console.log(current.nodeName, previous.nodeName); // DIV DIV
Try It Yourself

How It Works

  1. Create a root. box is the iterator root.
  2. Call nextNode(). Enters the set (here: DIV).
  3. Call previousNode(). Moves one step earlier — same node.
  4. Compare names. Both print DIV.

Example 2 — null at the Start

If you are already at the first node, previousNode() returns null.

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

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

const beforeAny = it.previousNode();
console.log(beforeAny); // null
Try It Yourself

How It Works

  1. Fresh iterator. Position starts before the first node.
  2. Call previousNode(). Nothing earlier exists.
  3. Get null. Same idea as end-of-walk for nextNode().
  4. Tip. Enter the set with nextNode() before stepping back.

Example 3 — Walk Backward

Advance to a later node, then collect names while stepping back.

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

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

const names = [];
let node;
while ((node = it.previousNode())) names.push(node.nodeName);

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

How It Works

  1. Move forward three times. Land on the last element.
  2. Loop with previousNode(). Assign and test in the while.
  3. Collect names. Order is reverse document order.
  4. Stop on null. You reached the start of the set.

Example 4 — referenceNode Updates

Remember: the first previousNode() after a forward step often returns the same node — call it again to move earlier.

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
it.nextNode(); // I
it.previousNode(); // I (backtrack to same)
it.previousNode(); // B (one earlier)

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

How It Works

  1. Step forward to <i>. Last forward return is I.
  2. First previousNode(). Backtracks to the same I.
  3. Second call. Moves to the earlier element B.
  4. Read position. referenceNode is B — see referenceNode.

Example 5 — Same Node After Pair

Prove nextNode() + previousNode() land on the identical object.

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

const it = document.createNodeIterator(box, NodeFilter.SHOW_ELEMENT);
it.nextNode(); // DIV
const a = it.nextNode(); // SPAN A
const b = it.previousNode();

console.log(a === b); // true
Try It Yourself

How It Works

  1. Skip the root. First nextNode() is the DIV.
  2. Store the next node. Second call returns the first SPAN.
  3. Backtrack. previousNode() returns that same SPAN.
  4. Strict equality. === is true — same object, not a copy.
Compatibility

Browser Support

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

✓ Baseline · Widely available

previousNode()

Walk backward 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. Pair with nextNode() for reversible walks, and skip deprecated detach().

Frequently Asked Questions

The previous node in document order within the iterator’s set, or null when you are already at the first node. It also moves the iterator position backward.
No. MDN marks NodeIterator.previousNode() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
When the current node is the first node in the set — there is no earlier node to return.
Yes. MDN’s classic pattern calls nextNode() then previousNode() to return to the same node — useful for reversible walks.
Yes. Each successful call moves the iterator backward and updates referenceNode (and pointerBeforeReferenceNode).
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: filter

See how an optional NodeFilter decides accept vs reject.

filter →

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 nextNode() Method JavaScript NodeIterator filter Property