Node: previousSibling property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The read-onlypreviousSibling property of theNode interfacereturns the node immediately preceding the specified one in its parent'schildNodes list,ornull if the specified node is the first in that list.
Note:Browsers insert text nodes into a document to represent whitespace in the source markup.Therefore a node obtained, for example, usingNode.firstChildorNode.previousSiblingmay refer to a whitespace text node rather than the actual element the author intended to get.
SeeWorking with whitespace in the DOM for more information.
You can usepreviousElementSiblingto get the previous element node (skipping text nodes and any other non-element nodes).
To navigate the opposite way through the child nodes list useNode.nextSibling.
Value
ANode representing the previous sibling of the current node,ornull if there are none.
Examples
The following examples demonstrate howpreviousSibling works with and without text nodes mixed in with elements.
First example
In this example, we have a series of<span> elements directly adjacent to each other, with no whitespace between them.
<span></span><span></span><span></span>document.getElementById("b1").previousSibling; // <span>document.getElementById("b2").previousSibling.id; // "b1"Second example
In this example, there are whitespace text nodes (line breaks) between the<span> elements.
<span></span><span></span><span></span>document.getElementById("b1").previousSibling; // #textdocument.getElementById("b1").previousSibling.previousSibling; // <span>document.getElementById("b2").previousSibling.previousSibling; // <span>document.getElementById("b2").previousSibling; // #textdocument.getElementById("b2").previousSibling.id; // undefinedSpecifications
| Specification |
|---|
| DOM # ref-for-dom-node-previoussibling① |