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

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

previousElementSibling property

Browser support:

9	3.5

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

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

The previous sibling node and the previous 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 previous sibling node of an element, use the previousSibling 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 previousElementSibling property, the nextElementSibling property returns the next sibling element of an element, furthermore the firstElementChild and lastElementChild properties return the first and last child element of an element.

Syntax:

object.previousElementSibling;

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

This property is read-only.

Possible values:

Reference to the previous 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 lastElementChild and previousElementSibling properties:

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

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