JavaScript NodeIterator previousNode() Method

What You’ll Learn

The previousNode() method of a NodeIterator returns the previous node in document order and moves the iterator backward. Learn backtracking after nextNode(), null at the first node, and how it updates referenceNode—with five examples and try-it labs.

Introduction

A NodeIterator usually walks forward with nextNode(). When you need to move back one step, call previousNode(). It returns the node before the current position and shifts the iterator backward in document order.

MDN’s classic pattern: call nextNode() once, then previousNode()—you land on the same node again because you backtracked. At the very start of the set, previousNode() returns null.

Understanding the previousNode() Method

An instance method on NodeIterator that returns the previous node in the iterator’s set and moves the position backward.

• Returns — a Node, or null at the first node.
• Parameters — none.
• Direction — backward in document order.
• Advances — updates referenceNode and pointerBeforeReferenceNode.
• Respects — whatToShow bitmask and filter.acceptNode().
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Call the method on a NodeIterator:

nodeIterator.previousNode()

Parameters

None.

Return value

A Node representing the previous node in the set, or null if the current node is the first one.

Typical pattern (MDN idea)

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

const forward = nodeIterator.nextNode();
const back = nodeIterator.previousNode();
console.log(forward === back); // true — backtracked to same node

⚖️ previousNode() vs Related Ideas

Examples Gallery

Examples follow MDN NodeIterator.previousNode. Labs show backtracking, null at the start, and paired forward/backward walks.

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

const forward = it.nextNode();
const back = it.previousNode();
console.log(forward === back); // true

true

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

console.log(it.previousNode()); // null — already at first position

null

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

const forward = [];
let node;
while ((node = it.nextNode())) forward.push(node.nodeName);

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

console.log(forward);   // ["DIV", "SPAN", "SPAN"]
console.log(backward);  // ["SPAN", "SPAN", "DIV"]

["DIV","SPAN","SPAN"]
["SPAN","SPAN","DIV"]

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

it.nextNode();
const second = it.nextNode();
it.previousNode();
console.log(it.referenceNode === second); // false — moved back one step

false

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

it.nextNode(); // first .pick
it.nextNode(); // second .pick
const back = it.previousNode();
console.log(back.textContent.trim()); // "A"

A

🚀 Common Use Cases

• Undo one forward step after overshooting with nextNode().
• Implement reversible tree walks without rebuilding state.
• Debug iterator position by stepping forward and backward.
• Walk to the end forward, then process nodes in reverse with previousNode().
• Pair with referenceNode when teaching iterator anchor behavior.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• null at the start means you cannot go further backward.
• Most everyday loops only need nextNode(); use previousNode() when you need backtracking.
• Respects the same whatToShow and filter rules as forward walks.
• Do not call deprecated detach() before walking.
• Related learning: nextNode(), referenceNode, pointerBeforeReferenceNode.

💡 Best Practices