JavaScript Node previousSibling Property

What You’ll Learn

The Node.previousSibling property returns the previous node in the parent’s childNodes list, or null if none. Learn the whitespace #text gotcha, previousSibling vs previousElementSibling, and how to walk siblings backward.

Introduction

Siblings share the same parent. previousSibling moves one step backward in that parent’s child list. Use nextSibling to move the other way.

The beginner surprise: pretty-printed HTML inserts whitespace text nodes between tags, so previousSibling is often #text instead of the previous element you see.

Understanding previousSibling

MDN: the read-only previousSibling property returns the node immediately preceding this one in the parent’s childNodes, or null if this node is the first child.

• Can be an element, text node, comment, or other node type.
• Whitespace between sibling tags creates #text nodes.
• Opposite direction: nextSibling.
• Read-only — you do not assign to previousSibling.

📝 Syntax

const prev = node.previousSibling;
if (prev) {
  console.log(prev.nodeName);
}

Return value

A Node, or null if there is no previous sibling.

⚖️ previousSibling vs previousElementSibling

Examples Gallery

Examples follow MDN Node.previousSibling patterns. Use View Output or Try It Yourself for each case.

// <span id="b0"></span><span id="b1"></span><span id="b2"></span>

const b1 = document.getElementById("b1");
console.log(b1.previousSibling.id); // "b0"

const b2 = document.getElementById("b2");
console.log(b2.previousSibling.id); // "b1"

b0
b1

const b1 = document.getElementById("b1");
console.log(b1.previousSibling.nodeName); // "#text"

// Skip the text node to reach the prior element:
console.log(b1.previousSibling.previousSibling.id); // "b0"

#text
b0

const b2 = document.getElementById("b2");
console.log(b2.previousSibling.nodeName);            // often "#text"
console.log(b2.previousElementSibling.nodeName);     // "SPAN"
console.log(b2.previousElementSibling.id);           // "b1"

#text
SPAN
b1

const first = document.getElementById("b0");
console.log(first.previousSibling); // null (if it is the first child)

if (first.previousSibling) {
  console.log(first.previousSibling.nodeName);
} else {
  console.log("No previous sibling");
}

null
No previous sibling

let el = document.getElementById("b2").previousSibling;
let i = 1;
let result = "Siblings before b2:\n";

while (el) {
  result += `${i}. ${el.nodeName}${el.id ? " #" + el.id : ""}\n`;
  el = el.previousSibling;
  i++;
}

console.log(result);

Siblings before b2:
1. #text
2. SPAN #b1
3. #text
4. SPAN #b0

🚀 Common Use Cases

• Backward sibling walks — list or process every node before a start point.
• Teach whitespace — show why indented HTML creates #text between tags.
• Prefer elements for UI — switch to previousElementSibling for tags.
• Pair with nextSibling — move both directions in childNodes.
• Custom list logic — step to the prior item without re-querying the DOM.

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Whitespace and comments can be the previous sibling.
• Use previousElementSibling when you only want elements.
• Related: nextSibling, textContent, parentNode, firstChild, JavaScript hub.

💡 Best Practices