previousSibling and nextSibling properties

It's possible to navigate from one node in the list to another by using the previousSibling and nextSibling properties.

 
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="div1">
            <p>Hello <b>World!</b></p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
        <p>Hello <b>World!</b></p>
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var node = div.nextSibling;
               document.writeln(node);
               

        </script>
        
    </body>
</html>

Click to view the demo

The following code gets the previous sibling.

 
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="div1">
            <p>Hello <b>World!</b></p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
        <p>Hello <b>World!</b></p>
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var node = div.previousSibling;
               document.writeln(node);
               

        </script>
        
    </body>
</html>

Click to view the demo

The first node in the list has null for the value of its previousSibling property. The last node in the list has null for the value of its nextSibling property.

 
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="div1">
            <p>Hello <b>World!</b></p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
        <p>Hello <b>World!</b></p>
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var node = div.previousSibling;
               if (node.nextSibling === null){
                   document.writeln("Last node in the parent's childNodes list."); 
               } else if (node.previousSibling === null){
                   document.writeln("First node in the parent's childNodes list."); 
               } 
        </script>
        
    </body>
</html>

Click to view the demo

If there's only one child node, both nextSibling and previousSibling will be null.

Home
JavaScript Book
DOM

DOM Model: