HTML DOM previousSibling Property

Last Updated : 15 Jun, 2023

The previousSibling property is used to return the previous node of the specified node as Node object or null if the specified node is the first in the list. It is a read-only property.

Syntax:

node.previousSibling

Return value: This property returns a previous sibling of the specified node or null if the current node has no previous sibling.

Example: In this example, we will use previousSibling property

HTML

<html>

<head>
    <title>DOM previousSibling Property</title>
</head>

<body style="text-align: center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        DOM previousSibling 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" style="margin:auto; width: 40%"></p>
    <!-- Function to return the previous node.-->
    <script>
        function geek() {
            let x = document.getElementById("p2")
                    .previousSibling.innerHTML;
            document.getElementById("p").innerHTML = x;
            document.getElementById("p").style.color = "white";
            document.getElementById("p").style.background = "green";
        }
    </script>
</body>

</html>

Output:

Note: Don't put whitespace between two sibling elements, else the result will be "undefined".

Supported Browsers: The browser supported by previousSibling property are listed below:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 5.5 and above
Firefox 1 and above
Opera 12.1 and above
Safari 1 and above

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

HTML onunload Event Attribute

The onunload event attribute works when the document is being unloaded i.e. it occurs when the browser has been closed. It is mostly used when the user opens a link and submits the form and closes the browser window. Basically, it is: Fired when a user navigates away from a page or closes the browse

HTML DOM exitFullscreen() Method

The exitFullscreen() method requests the element which is currently in full-screen mode to be taken out of full-screen mode. If the element is not in full-screen mode, then nothing gets changed. The reverse of this method is requestFullscreen(). Syntax: HTMLElementObject.exitFullscreen() Parameters:

HTML DOM children Property

The DOM children property is used to return an HTML collection of all the child elements of the specified element. The elements in the collection can be accessed by index numbers. It differs from childNodes as childNodes contain all nodes (i.e. it includes text and comment nodes as well) but on the

HTML DOM button Object

The button object in HTML is used to represent a <button> element. The getElementById() method is used to get the button object. Property Values:Property ValuesDescriptionautofocusSets or returns whether a button should automatically get focused on page load.defaultValueSets or returns the def

HTML DOM scrollLeft Property

HTML DOM scrollLeft property is used to return or set the number of pixels an element i.e. scrolled horizontally. If the content of the element doesn't generate a scroll bar, then its scrollLeft value is 0;Â Syntax: It returns the scrollLeft property.element.scrollLeftIt is used to set the scrollLef

HTML DOM scrollHeight Property

The DOM scrollHeight property is used to return the height of an element. This property includes padding and also content that is not visible on the screen due to overflow but does not include a border, scrollbar, or margin. It is a read-only property. Syntax: element.scrollHeight Return Value: It r

HTML DOM lastElementChild Property

The DOM lastElementChild property is used to return the last child element of the specified element or null if there is no last element. It is similar to the lastChild property but the difference is that the lastChild property returns all last-child nodes i.e. it includes text and comment nodes as w

HTML DOM hasAttributes() Method

The HTML DOM hasAttribute() method is a boolean function that returns either true or false but not both. This method returns a true value if the element contains an attribute otherwise, it returns false. It is very useful to know whether the element in the document has attributes or not. Syntax: nod

HTML DOM contains() Method

The contains() method is used to find whether the specified node is a descendant of the given node. This descendant can be a child, grandchild, great-grandchild, and so on. Syntax: node.contains( otherNode ) Parameters: The â€œothernodeâ€ in the syntax is the parameter required in this function. Return

HTML DOM offsetWidth Property

The DOM offsetWidth property is used to return the layout width of an element as an integer. It is measured in pixels. It includes width, border, padding, and vertical scrollbars but not margin. If the element is hidden then it returns 0. Syntax: element.offsetWidth Return Value: It returns the layo