In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > xml handling > methods > nextSibling (TreeWalker)

nextSibling method (TreeWalker)

Browser support:

9

Finds the next sibling of the current node in the tree represented by the current TreeWalker object. If it exists, it will be made the current node and returned, else the current node is retained and null is returned.

Note: The TreeWalker object and its nextSibling method are supported in Internet Explorer from version 9.

The TreeWalker object represents the result of the createTreeWalker method as a tree. The elements of the resulting tree refer to the nodes in the document that fulfill the conditions specified for the createTreeWalker method. For further details, please see the page for the TreeWalker object.

Syntax:

object.nextSibling ( );

You can find the related objects in the Supported by objects section below.

Return value:

Returns the node if found, else returns null.

Example HTML code 1:

This example illustrates the use of the nextSibling method:

<head>
    <script type="text/javascript">
        function ElementChecker (node) {
            if (node.tagName.toLowerCase () == 'span') {
                return NodeFilter.FILTER_ACCEPT;
            }
            return NodeFilter.FILTER_SKIP;
        }

        function FindMainSections () {
            var contElem = document.getElementById ("content");
            if (document.createTreeWalker) {
                walker = document.createTreeWalker (contElem, NodeFilter.SHOW_ELEMENT, ElementChecker, false);

                    // get the first matching node
                var node = walker.firstChild ();
                
                while (node) {
                    alert ("The contents of the section:\n " + node.innerHTML);
                    node = walker.nextSibling ();
                }
            }
            else {
                alert ("Your browser does not support the createTreeWalker method!");
            }
        }
    </script>
</head>
<body>
    <div id="content">
        <span>
            <b>1. Section</b><br />
            <span>
                <b>1.1. Subsection</b><br />
            </span>
        </span>
        <span>
            <b>2.Section</b><br />
        </span>
    </div>

    <br /><br />
    <button onclick="FindMainSections ()">Find the main sections with the TreeWalker object</button>
</body>