JavaScript Element previousElementSibling Property

What You’ll Learn

Element.previousElementSibling is a read-only instance property that returns the element immediately before the current one in the parent’s children list, or null when there is no previous element. Learn how it differs from previousSibling, how to chain backward traversal, and how to use it safely—with five examples and try-it labs.

Introduction

When you already have one element and need the tag just before it, previousElementSibling is the direct read.

It is perfect for stepping backward across cards, list items, rows, or menu entries without getting tripped up by whitespace text nodes that previousSibling may return.

const third = document.getElementById("div-03");
console.log(third.previousElementSibling.textContent);

Understanding the Property

MDN: the read-only previousElementSibling property returns the Element immediately prior to the specified one in its parent’s children list, or null if the specified element is the first one in the list.

• Read-only — use it to navigate, not assign.
• Element or null — never returns text or comment nodes.
• Sibling-only — stays on the same parent level.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

previousElementSibling

Value

An Element reference for the previous sibling element, or null when there is no preceding element sibling.

📋 MDN Backward Loop Shape

MDN starts from one element and walks backward through preceding element siblings:

let el = document.getElementById("div-03").previousElementSibling;
console.log("Siblings of div-03:");
while (el) {
  console.log(el.nodeName);
  el = el.previousElementSibling;
}

Related learning: previousSibling, nextElementSibling, and children.

Examples Gallery

Examples follow MDN Element: previousElementSibling. Labs use simple sibling groups so you can compare element-only navigation safely.

const last = document.getElementById("div-03");
console.log(last.previousElementSibling.id);

div-02

const second = document.getElementById("second");
console.log({
  previousSiblingType: second.previousSibling.nodeName,
  previousElementSiblingTag: second.previousElementSibling.tagName
});

{
  "previousSiblingType": "#text",
  "previousElementSiblingTag": "DIV"
}

const first = document.getElementById("first");
console.log(first.previousElementSibling); // null
console.log(first.previousSibling === null || first.previousSibling.nodeName === "#text");

null
true

let el = document.getElementById("div-03").previousElementSibling;
const names = [];
while (el) {
  names.push(el.nodeName);
  el = el.previousElementSibling;
}
console.log(names.join(", "));

LI, LI, DIV, DIV

console.log({
  supported: "previousElementSibling" in Element.prototype,
  returns: "Element or null",
  tip: "Use previousSibling only when you need text/comment nodes too",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "Element or null",
  "tip": "Use previousSibling only when you need text/comment nodes too",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Moving to the previous tab, card, row, or menu item element.
• Skipping whitespace nodes that previousSibling would return.
• Walking backward through preceding siblings in a loop.
• Checking whether an element has a preceding sibling before enabling a "back" action.
• Pairing with nextElementSibling for bidirectional sibling navigation.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Returns null, not undefined, when no previous element sibling exists.
• From the NonDocumentTypeChildNode mixin, so it is available on element, character data, and document type nodes where applicable.
• Related: nextElementSibling, outerHTML, children, previousSibling, JavaScript hub.

💡 Best Practices