Open In App

HTML DOM nextSibling Property

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>DOM nextSibling Property</title>
    </head>

    <body>
        <h2>DOM nextSibling Property</h2>
        <div>
            <span id="p1"> GeeksforGeeks! </span
            ><span id="p2">
                A computer science portal for
                geeks.
            </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: 

DOM-nextSibling-Property

HTML DOM nextSibling Property Example Output

Note: Don’t put whitespace between two sibling elements, else the result will be “undefined”. 

Nodes vs Elements

Node

Elements

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

childNodes

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:



Last Updated : 13 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads