HTML DOM nextSibling Property
The nextSibling property returns the next node at the same tree level, providing a node object. It’s read-only and navigates through sibling nodes within the document structure.
Syntax:
node.nextSibling
Return value:
Name | Description |
---|---|
Node | The nextSibling property returns the next sibling node or null if none exists. |
Note: next sibling node: element, text, or comment node; includes whitespace as text nodes between elements.
HTML DOM nextSibling Property Examples
Example: In this example, we will use the DOM nextSibling property to retrieve the inner HTML content of the sibling element after the element with id “p1” and updates the paragraph element accordingly.
<!DOCTYPE html>
<html>
<head>
<title>DOM nextSibling Property</title>
</head>
<body>
<h2>DOM nextSibling Property</h2>
<div>
<span id="p1"> w3wiki! </span
><span id="p2">
A computer science portal for
Beginner.
</span>
</div>
<br />
<button onclick="geek()">
Click me!
</button>
<br />
<br />
<p id="p"></p>
<script>
function geek() {
let x =
document.getElementById("p1")
.nextSibling.innerHTML;
document.getElementById(
"p"
).innerHTML = x;
document.getElementById(
"p"
).style.color = "white";
document.getElementById(
"p"
).style.background = "green";
}
</script>
</body>
</html>
Output:
Note: Don’t put whitespace between two sibling elements, else the result will be “undefined”.
Nodes vs Elements
Node | |
---|---|
Fundamental parts of DOM, including elements, text, comments | Specific HTML components defining structure, content, and attributes. |
Represent any part of HTML, including content, attributes, metadata. | Represent HTML structural components like <div>, <p>, <a>, etc. |
Siblings vs Element Siblings
Siblings | Element Siblings |
---|---|
Nodes with the same parent in the DOM, listed in childNodes. | Elements with the same parent, listed in children. |
Can include various node types: element, text, comment, etc. | Specifically refer to adjacent HTML elements in DOM. |
childNodes vs children
children | |
---|---|
Includes all types of nodes, including elements, text, and comments. | Specifically includes only element nodes, excluding text and comments. |
Represents all direct children of the node, regardless of type. | Represents only element nodes that are direct children of the node. |
nextSibling vs nextElementSibling
nextSibling | nextElementSibling |
---|---|
Returns next node, including elements, text, comments, etc. | Returns next element node, excluding text and comments. |
Accessible via nextSibling property in DOM traversal. | Accessible via nextElementSibling property in DOM traversal. |
previousSibling vs previousElementSibling
previousSibling | previousElementSibling |
---|---|
Returns previous node, including elements, text, comments, etc. | Returns previous element node, excluding text and comments. |
Accessed via previousSibling property in DOM traversal. | Accessed via previousElementSibling property in DOM traversal. |
Supported Browsers:
The browser supported by nextSibling property are listed below: