JavaScript previousElementSibling Property Tutorial

In this section, we will learn what the previousElementSibling property is and how to use it in JavaScript.

What is Element previousElementSibling Property in JavaScript?

The JavaScript Element `previousElementSibling` property is used to get a reference to the previous Element-node sibling of the current node (the one that invoked this property).

For example, if you have a list with three <li> elements with the values “Item 1”, “Item 2”, and “Item 3” set for each item respectively, then calling the `previousElementSibling` property on the last item will return the second item that has the value “Item 2”.

Note that we’re saying the previous `Element-node` sibling! That means if the immediate sibling of the target node is a node of type Text or Comment, for example, this property will ignore it and move on until it reaches a previous sibling that is of type Element-node.

JavaScript previousElementSibling Property Syntax:

element.previousElementSibling;

JavaScript previousElementSibling Property Input Value

The previousElementSibling property is read-only and so we can’t assign a value to it.

JavaScript previousElementSibling Property Return Value

The return value of this property, as mentioned before, is the previous `Element-node` sibling of the node (the one that invoked the property)

Note: if there’s no sibling, the return value of this property will be null.

Example: using previousElementSibling Property in JavaScript

See the Pen using previousElementSibling Property in JavaScript by Omid Dehghan (@odchan1) on CodePen.

How does the previousElementSibling property work in JavaScript?

Here in this example, there’s a text-node between the first and the second items of the list. But when we’ve called the `previousElementSibling` property on the last item, you can see the `text-node` between the two items is ignored and the first <li> element returned as a result.

Again, this is because the previousElementSibling property looks for the previous sibling of the node that is an `Element-node`.

Leave a Reply