JavaScript Node previousSibling Property

Beginner

5 min read

Updated: Oct 2026

5 examples

Live preview

Baseline

JavaScript Node.previousSibling property — previous DOM sibling and whitespace text nodes

Definition

What Is `previousSibling`?

Node.previousSibling is a read-only property that returns the node immediately before this one in the parent’s childNodes list, or null if this node is first (MDN).

Baseline · Widely available: not Deprecated, Experimental, or Non-standard (since July 2015).

Note: browsers insert Text nodes for whitespace in markup. So previousSibling is often #text, not the previous element — use previousElementSibling to skip non-elements (MDN).

Remember

node.previousSibling  →  previous Node | null

Includes text / comment nodes (not elements only)
Pretty HTML → often #text between tags

Want the previous element?
  node.previousElementSibling

Use	Prefer
Any previous node (incl. text)	`node.previousSibling`
Previous element only	`previousElementSibling`
Walk forward instead	`nextSibling`

Approach

How to Use `previousSibling`

Read it on a node, check for null, and decide whether you need any node or only an element.

Get a node that has a parent (for example an element with an id).
Read node.previousSibling.
If the result is null, there is no previous sibling.
If you only want an element, use previousElementSibling instead.

Piece	Required?	Role
Any `Node`	Yes	Receiver in a parent’s `childNodes`
Return value	—	Previous sibling `Node`, or `null`

Pseudocode

if node has no parent OR node is first child:
  return null

return the node just before this one
  in parent.childNodes   // may be Element, Text, Comment, …

Reference

Cheat Sheet

Keep these facts handy when walking siblings backward.

Topic	Detail
Syntax	`node.previousSibling`
Type	Read-only `Node` or `null`
First child?	Returns `null`
Whitespace	Often returns `#text` between tags
Elements only	`previousElementSibling`
Opposite direction	`nextSibling`
Walk loop	`while (n) { …; n = n.previousSibling; }`
Status (MDN)	Baseline Widely available

Try it

Live Preview

Compare compact vs spaced markup, skip to the previous element, or walk all preceding siblings.

Browser demo of Node.previousSibling — compact HTML, whitespace, element skip, or walk.

Result

Loading…

Code

JavaScript Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

Example 1 — Compact HTML (MDN)

No whitespace between tags — previousSibling is the prior element.

JavaScript

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

const b1 = document.getElementById("b1");
const b2 = document.getElementById("b2");

console.log(b1.previousSibling.id); // "b0"
console.log(b2.previousSibling.id); // "b1"

Try It Yourself

How It Works

Tags sit flush. No Text nodes between the spans.
b1.previousSibling is #b0. Immediate prior child.
b2.previousSibling is #b1. Same rule one step over.
.id works. Result is an Element, not text.

Example 2 — Whitespace Between Tags (MDN)

Pretty-printed HTML often inserts #text between elements.

JavaScript

// HTML with newlines between spans:
// <span id="b0"></span>
// <span id="b1"></span>

const b1 = document.getElementById("b1");

console.log(b1.previousSibling.nodeName); // "#text"
console.log(b1.previousSibling.previousSibling.id); // "b0"

Try It Yourself

How It Works

Whitespace becomes Text. Browsers keep it in childNodes (MDN).
First hop is #text. Not #b0.
Second hop reaches #b0. Skip the text node.
Common gotcha. .id on #text is undefined.

Example 3 — vs `previousElementSibling`

Skip text nodes and land on the previous element.

JavaScript

// Spans with newlines between them
const b2 = document.getElementById("b2");

console.log(b2.previousSibling.nodeName);           // "#text"
console.log(b2.previousElementSibling.nodeName);    // "SPAN"
console.log(b2.previousElementSibling.id);          // "b1"

Try It Yourself

How It Works

previousSibling sees everything. Including whitespace Text.
previousElementSibling skips non-elements. Lands on #b1 (MDN).
Prefer for UI walks. You usually want the last tag, not the newline.
Both return null when nothing matches.

Example 4 — First Child Is `null`

The first sibling has no previous node — always guard the result.

JavaScript

const first = document.getElementById("b0");
// inside: <div><span id="b0">First</span></div>

console.log(first.previousSibling); // null

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

Try It Yourself

How It Works

#b0 is first under its parent. Nothing before it.
Property is null. Not an error by itself (MDN).
Guard before use. Avoid reading .id on null.
Same for detached nodes. No parent → typically null.

Example 5 — Walk All Preceding Siblings

Loop backward until previousSibling is null.

JavaScript

let el = document.getElementById("b2").previousSibling;
let i = 1;

while (el) {
  console.log(i + ". " + el.nodeName + (el.id ? " #" + el.id : ""));
  el = el.previousSibling;
  i++;
}

Try It Yourself

How It Works

Start one step before #b2. First hop is usually #text.
Loop while truthy. Stop at null.
Print nodeName / id. Shows elements and text nodes.
For elements only. Use previousElementSibling in the loop instead.

Edge Cases & Pitfalls

Check these before assuming the previous tag is an element.

whitespace

Pretty HTML inserts `#text`

Newlines and spaces between tags become Text nodes — a top beginner surprise (MDN).

null

First child returns `null`

Always check before reading .id or .nodeName on the result.

elements

Need an element? Use `previousElementSibling`

Skips text and comments so you land on the previous Element (MDN).

live

Tree changes update the link

Insert or remove siblings and the next read of previousSibling reflects the new tree.

Compatibility

Browser Support

Node.previousSibling is Baseline Widely available (MDN, since July 2015). Classic DOM navigation — safe everywhere.

✓ Baseline · Widely available

Node.previousSibling

Supported across Chrome, Firefox, Safari, Edge, Opera, and legacy IE. Returns the previous childNodes entry or null.

99% Browser support

Google Chrome previousSibling · full support

Full support

Microsoft Edge previousSibling · Chromium

Full support

Apple Safari previousSibling · full support

Full support

Mozilla Firefox previousSibling · full support

Full support

Opera previousSibling · full support

Full support

Internet Explorer previousSibling · legacy

Legacy support

Node.previousSibling Excellent

Bottom line: Use freely. Prefer previousElementSibling when you only want the previous HTML element.

Analysis

Performance Notes

Approach	Cost	Best for
One `previousSibling` read	Cheap	Neighbor checks
Walk all preceding	O(k) siblings	Short lists
Elements only	Usually fewer hops	`previousElementSibling` loop

Sibling pointers are O(1) per hop. For long lists of mixed text nodes, prefer previousElementSibling if you only need elements.

Remember

Key Takeaways

Role: previous entry in parent.childNodes, or null.
Whitespace: pretty HTML often makes the previous node #text.
Elements: use previousElementSibling to skip non-elements.
Guard null: first child / no parent → null.

One line: node.previousSibling is the previous childNodes neighbor — often a Text node when HTML is pretty-printed.

Frequently Asked Questions

What does Node.previousSibling return?

The node immediately before this one in the parent’s childNodes list, or null if this node is the first in that list (MDN).

Is previousSibling deprecated or experimental?

No. MDN marks Node.previousSibling as Baseline Widely available (since July 2015). It is a standard DOM property — not Deprecated, Experimental, or Non-standard.

Why is previousSibling often #text?

Browsers insert Text nodes for whitespace between tags in the HTML source. So the node before an element is often #text, not the previous visible tag (MDN).

When should I use previousElementSibling?

Use Element.previousElementSibling when you want the previous element and want to skip text and comment nodes. Prefer it for most UI sibling walks (MDN).

What if there is no previous sibling?

previousSibling is null. Always check before reading nodeName, id, or other properties on the result.

How do I walk all preceding siblings?

Start from a node and loop backward: while (el) { …; el = el.previousSibling; }. Use nextSibling to walk the other way.

Next: textContent

Learn how node.textContent gets or sets text for a node and its descendants.

textContent tutorial →

About the author

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)

10 people found this page helpful

JavaScript Node parentNode Property JavaScript Node textContent Property

JavaScript Node previousSibling Property

What Is previousSibling?

How to Use previousSibling

Pseudocode

Cheat Sheet

Live Preview

JavaScript Examples

Example 1 — Compact HTML (MDN)

How It Works

Example 2 — Whitespace Between Tags (MDN)

How It Works

Example 3 — vs previousElementSibling

How It Works

Example 4 — First Child Is null

How It Works

Example 5 — Walk All Preceding Siblings

How It Works

Edge Cases & Pitfalls

Pretty HTML inserts #text

First child returns null

Need an element? Use previousElementSibling

Tree changes update the link

Browser Support

Node.previousSibling

Performance Notes

Key Takeaways

Frequently Asked Questions

Related Topics

nextSibling

previousElementSibling

parentNode

childNodes

textContent

JavaScript Hub

Next: textContent

About the author

What Is `previousSibling`?

How to Use `previousSibling`

Example 3 — vs `previousElementSibling`

Example 4 — First Child Is `null`

Pretty HTML inserts `#text`

First child returns `null`

Need an element? Use `previousElementSibling`