Node: nextSibling property
The read-only nextSibling
property of the Node
interface
returns the node immediately following the specified one in their
parent's childNodes
, or returns null
if the specified node is the last child in the parent element.
Note: 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.
The article Whitespace in the DOM contains more information about this behavior.
You can use Element.nextElementSibling
to obtain the next element
skipping any whitespace nodes, other between-element text, or comments.
To navigate the opposite way through the child nodes list use Node.previousSibling.
Value
A Node
representing the next sibling of the current node,
or null
if there are none.
Example
<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<br />
<output><em>Not calculated.</em></output>
let el = document.getElementById("div-1").nextSibling;
let i = 1;
let result = "Siblings of div-1:\n";
while (el) {
result += `${i}. ${el.nodeName}\n`;
el = el.nextSibling;
i++;
}
const output = document.querySelector("output");
output.innerText = result;
Specifications
Specification |
---|
DOM Standard # ref-for-dom-node-nextsibling① |
Browser compatibility
BCD tables only load in the browser