The previousSibling property is utilized to retrieve the preceding node of a specified node, returning it as a Node object. In cases where the specified node is the initial item within the list, the result will be a null Node object.
The previousSibling property reveals the element that precedes the specified one at the same hierarchical level within the document tree. This property is utilized to access the previousSibling node, and it is required to return the preceding sibling node in the form of a text node, an element node, or a comment node. It is important to note that this property is read-only when it comes to web pages.
It is important to recognize that the children property is utilized to retrieve all of the child elements of a specific element. Additionally, we can access the previous sibling node using the alert, console, and innerHTML methods.
Syntax
The syntax outlined below retrieves the preceding sibling node of the list.
node.previousSibling
Return value
- This property gives a node's previous sibling as an element.
- This property gives a null if the previous sibling node does not available.
Note Don't put whitespace between two elements already close to each other, or the result will be "undefined."
Examples
The subsequent example illustrates the result of retrieving multiple values or nodes by utilizing the previousSibling property.
Example 1
The fundamental property known as previousSibling in the JavaScript example provided below demonstrates how to obtain the preceding sibling node of the second node.
<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property does not support IE8 and before versions. </p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (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").previousSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = var_value;
}
</script>
</body>
</html>
Output
The illustration presents the value of the preceding sibling node as a result.
Example 2
The fundamental property known as previousSibling provides output through the console log function. In this instance, we can retrieve the preceding sibling node associated with the third node.
<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property does not support white space in the list tag. </p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (fourth) </li></ul>
<p> Click the below button to get previous in the console tab. </p>
<button onclick = "myclickFunction()"> Click Here </button>
<script>
function myclickFunction() {
var var_value = document.getElementById("item3").previousSibling.innerHTML;
console.log("The previousSibling Property in javascript ");
console.log(var_value);
}
</script>
</body>
</html>
Output
The output displayed in the image represents the value of the preceding sibling node.
Example 3
The fundamental previousSibling property in JavaScript, along with a conditional example, is illustrated below. This property allows us to retrieve the value of the previous sibling node, if one exists. When the previous sibling node is present, the property returns its value; conversely, if there are no previous sibling nodes, the property yields a null value.
<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property does not support IE8 and before versions. </p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (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("item1").previousSibling;
console.log(var_value);
if(var_value == null){
document.getElementById("demo_var_value").innerHTML = "The previousSibling node does not available : " +var_value;
}else{
document.getElementById("demo_var_value").innerHTML = var_value;
}
}
</script>
</body>
</html>
Output
The image illustrates the value of the preceding sibling node as a result. The output is null due to the absence of the preceding sibling node.
Example 4
The fundamental previousSibling property in JavaScript, along with a conditional example, is illustrated below. This property allows us to retrieve the value of the previous sibling node, provided that the list is formatted without any spaces. If there is a space placed within the list tag, the resulting data will appear as undefined.
<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property does not support IE8 and before versions. </p>
<p> Given Example list: </p>
<ul>
<li id = "item1"> HTML (First) </li>
<li id = "item2"> CSS (second) </li>
<li id = "item3"> Javascript (Third) </li>
<li id = "item4"> Jquery (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").previousSibling.innerHTML;
console.log(var_value);
document.getElementById("demo_var_value").innerHTML = "The previousSibling node shows syntax error : " +var_value;
}
</script>
</body>
</html>
Output
The image illustrates an output that presents an undefined value, represented by a blank space within the list.
Example 5
The fundamental previousSibling property in JavaScript, along with a conditional example, is demonstrated below. In this scenario, we can retrieve the previous sibling nodes for the first, third, and last nodes at the same time.
<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property gets available previous value.</p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (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").previousSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = "the second nodes previous sibling node : "+var_value;
var var_value2 = document.getElementById("item4").previousSibling.innerHTML;
document.getElementById("demo_var_value2").innerHTML = "the last nodes privious sibling node : "+var_value2;
var var_value3 = document.getElementById("item1").previousSibling;
if(var_value3 == null){
document.getElementById("demo_var_value3").innerHTML = "The previousSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The previousSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>
Output
The illustration shows the value of the previous sibling node as the result. The output is null since the previous sibling node does not exist.
Example 6
The preceding sibling node attribute is applicable to all tags that do not contain whitespace. It presents information in a list format, although it does not explicitly enumerate the tags.
<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property gets available previous value.</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").previousSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = "the second nodes previous sibling node : "+var_value;
var var_value3 = document.getElementById("item1").previousSibling;
if(var_value3 == null){
document.getElementById("demo_var_value3").innerHTML = "The previousSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The previousSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>
Output
The illustration shows the preceding sibling nodes of the second node.
Supported Browsers
Here is a list of the browsers that the previousSibling property works with:
- Google Chrome version 1 and up
- Edge 12 or higher and
- Internet Explorer 5.5 or higher
- Firefox 1 or higher
- Opera 12.1 or higher
- Safari 1 or higher
Conclusion
The previousSibling property is utilized to locate the preceding node of a specified node, excluding any whitespace nodes within the list structure. This fundamental JavaScript feature is essential for handling list-type data or array-like information.