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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > nextElementSibling

nextElementSibling property

Browser support:

9	3.5

Returns a reference to the next child element of the current element's parent.

Note: The nextElementSibling property is supported in Firefox from version 3.5 and Internet Explorer from version 9.

The next sibling node and the next sibling element can be different. A node is an element node if it's nodeType is 1 (Node.ELEMENT_NODE). Text nodes and comment nodes are not element nodes. If you need the next sibling node of an element, use the nextSibling property.

The children collection contains all child elements of an element in source order. If you want to iterate through the child elements of an element, you can also use it.

Note: The children collection also contains the child comment nodes in Internet Explorer before version 9. In other browsers, it only contains the element nodes.

Similarly to the nextElementSibling property, the previousElementSibling property returns the previous sibling element of an element, furthermore the firstElementChild and lastElementChild properties return the first and last child element of an element.

Syntax:

object.nextElementSibling;

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

This property is read-only.

Possible values:

Reference to the next sibling element or null if it does not exist.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the firstElementChild and nextElementSibling properties:

<head>
    <script type="text/javascript">
        function GetListItems () {
            var list = document.getElementById ("myList");

            if ('firstElementChild' in list) {
                var child = list.firstElementChild;
                while (child) {
                    alert (child.innerHTML);
                    child = child.nextElementSibling;
                }
            }
            else {
                var child = list.firstChild;
                while (child) {
                    if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
                        alert (child.innerHTML);
                    }
                    child = child.nextSibling;
                }
            }
        }
    </script>
</head>
<body>
    <ol id="myList">
        <li>Apple</li>
        <li>Peach</li>
        <li>Cherry</li>
    </ol>
    <button onclick="GetListItems ();">Get the list items!</button>
</body>