The JavaScript property previousElementSibling is utilized to retrieve the preceding node of a specified or input node in the form of a Node object. In cases where the specified node is the first element in the list, the nodes object will return null.
The previousElementSibling property allows you to access the element that precedes a specified element at the same hierarchical level within the DOM tree. This property is intended solely for reading purposes when interacting with a web page.
Syntax
The syntax provided below retrieves the preceding sibling node from the list utilizing the previousElementSibling property.
<script>
Let variable_name = node.previousElementSibling;
</script>
Return value
- The Property reveals the preceding sibling node as an element.
- In the absence of a previous sibling node, the Property returns a null value.
Supported Browsers
The following list of the browsers that the previousElementSibling Property works with:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
- Edge
Examples
The example provided below illustrates how to utilize the previousElementSibling property to showcase multiple values or nodes.
Example 1
The fundamental previousElementSibling property in the JavaScript example illustrated below enables us to retrieve the preceding sibling node of the second node.
<!DOCTYPE html>
<html>
<body>
<h3> The previousElementSibling Property in javascript </h3>
<p> The Javascript previousElementSibling property is supported in IE8 and before versions. </p>
<p> Given Example list: </p>
<ul> <li id = "item1"> JAVA (First) </li>
<li id = "item2"> PHP (second) </li>
<li id = "item3"> PYTHON (Third) </li>
<li id = "item4"> PERL (fourth) </li></ul>
<p> Click the below button to get the previous sibling of the second node in the given list </p>
<button onclick = "myclickFunction()"> Click Here </button>
<p id = "demo_var_value"></p>
<script>
function myclickFunction() {
var var_value = document.getElementById("item2").previousElementSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = var_value;
}
</script>
</body>
</html>
Output
The image retrieves the preceding node of the desired node by utilizing the JavaScript property.
Example 2
The fundamental property previousElementSibling provides output through the console log function. In this context, we can retrieve the preceding sibling node of the third node.
<!DOCTYPE html>
<html>
<body>
<h3> The previousElementSibling Property in javascript </h3>
<p> The Javascript previousElementSibling property does not support IE8 and before versions.</p>
<p> Given Example list: </p>
<ul>
<li id = "item1"> JAVA (First) </li>
<li id = "item2"> PYTHON (second) </li>
<li id = "item3"> PHP (Third) </li>
<li id = "item4"> PERL (fourth) </li>
</ul>
<p> Click the below button to get the previous sibling of the second node in the given list </p>
<button onclick = "myclickFunction()"> Click Here </button>
<p id = "demo_var_value3"></p>
<script>
function myclickFunction() {
var var_value3 = document.getElementById("item1").previousElementSibling;
document.getElementById("demo_var_value3").innerHTML = "The previousElementSibling node does not available : " +var_value3;
}
</script>
</body>
</html>
Output
The image receives a null value due to the initial mandatory node utilizing the JavaScript Property.
Example 3
The fundamental previousElementSibling property in JavaScript, accompanied by a conditional example, is illustrated below. In this scenario, we can retrieve the preceding sibling nodes of the first, third, and last nodes concurrently. We have the option to utilize either whitespace or an individual tag for each list item.
<!DOCTYPE html>
<html>
<body>
<h3> The previousElementSibling Property in javascript </h3>
<p> The Javascript previousElementSibling property does not support IE8 and before versions.</p>
<p> Given Example list: </p>
<ul>
<li id = "item1"> JAVA (First) </li>
<li id = "item2"> PYTHON (second) </li>
<li id = "item3"> PHP (Third) </li>
<li id = "item4"> PERL (fourth) </li>
</ul>
<p> Click the below button to get the previous sibling of the second node in the given list </p>
<button onclick = "myclickFunction()"> Click Here </button>
<p id = "demo_var_value"></p>
<p id = "demo_var_value2"></p>
<p id = "demo_var_value3"></p>
<script>
function myclickFunction() {
var var_value = document.getElementById("item2").previousElementSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = "the second nodes previous sibling node : "+var_value;
var var_value2 = document.getElementById("item4").previousElementSibling.innerHTML;
document.getElementById("demo_var_value2").innerHTML = "the last nodes previous sibling node : "+var_value2;
var var_value3 = document.getElementById("item1").previousElementSibling;
if(var_value3 == null){
document.getElementById("demo_var_value3").innerHTML = "The previousElementSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The previousElementSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>
Output
The image retrieves several preceding nodes of the specified node by utilizing the JavaScript property.
Example4
The property of the preceding sibling node applies to all tags that do not contain whitespace. It presents information in a list format, although it does not strictly enumerate tags.
<!DOCTYPE html>
<html>
<body>
<h3> The previousElementSibling Property in javascript </h3>
<p> The Javascript previousElementSibling property does not support IE8 and before versions. </p>
<div>
<p id = "item1"> C# Tutorial </p>
<p id = "item2"> TutorialsandExample </p>
</div>
<button onclick="myclickFunction()"> Click Here </button>
<p id = "demo_var_value" style = "color: red;"></p>
<p id = "demo_var_value2" style = "color: orange;"></p>
<p id = "demo_var_value3" style = "color: green;"></p>
<script>
function myclickFunction() {
var var_value = document.getElementById("item2").previousElementSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = "the second nodes previous sibling node : "+var_value;
var var_value3 = document.getElementById("item1").previousElementSibling;
if(var_value3 == null){
document.getElementById("demo_var_value3").innerHTML = "The previousElementSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The previousElementSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>
Output
The image retrieves all preceding nodes of the specified node by utilizing a list tag.
Conclusion
The JavaScript property previousElementSibling reveals the preceding element in a list, omitting any whitespace. This property is utilized to manage, operate, and present list data, hash data, and various other types of information by leveraging the previousElementSibling functionality.