Node.previousSibling

The Node.previousSibling read-only property returns the node immediately preceding the specified one in its parent's childNodes list, or null if the specified node is the first in that list.

Syntax

previousNode = node.previousSibling;

Examples

The following examples demonstrate how previousSibling works with and without text nodes mixed in with elements.

First example

In this example, we have a series of img elements directly adjacent to each other, with no whitespace between them.

<img id="b0"><img id="b1"><img id="b2">
document.getElementById("b1").previousSibling;    // <img id="b0">
document.getElementById("b2").previousSibling.id; // "b1"

Second example

In this example, there are whitespace text nodes (line breaks) between the img elements.

<img id="b0">
<img id="b1">
<img id="b2">

document.getElementById("b1").previousSibling;                 // #text
document.getElementById("b1").previousSibling.previousSibling; // <img id="b0">
document.getElementById("b2").previousSibling.previousSibling; // <img id="b1">
document.getElementById("b2").previousSibling;                 // #text
document.getElementById("b2").previousSibling.id;              // undefined

Notes

Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a whitespace text node rather than the actual element the author intended to get. You can use previousElementSibling to get the previous element node (skipping text nodes and any other non-element nodes).

See Whitespace in the DOM and W3C DOM 3 FAQ: Why are some Text nodes empty? for more information.

To navigate the opposite way through the child nodes list use Node.nextSibling.

Specifications

Specification
DOM Standard (DOM)
# ref-for-dom-node-previoussibling①

Browser compatibility

BCD tables only load in the browser

See also