Javascript previousElementSibling属性

javascript的previousElementSibling属性用于显示所需节点或输入节点的前一个节点，作为一个Node对象。如果给定节点是列表的初始元素，则节点对象显示null。

previousElementSibling属性用于获取在同一层级的指定元素之前的元素。该属性仅用于在网页上进行读取。

语法

使用previousElementSibling属性获取列表中的一个前一个兄弟节点的语法如下。

<script>
Let variable_name = node.previousElementSibling;
</script>

返回值

Property 展示了前一个兄弟节点作为一个元素。
如果前一个兄弟节点不可用，则 Property 获取到 null。

支持的浏览器

以下列表是 previousElementSibling Property 可用于的浏览器：

Google Chrome
Internet Explorer
Firefox
Opera
Safari
Edge

示例

以下示例显示了使用 previousElementSibling Property 显示多个值或节点。

示例1

javascript 示例中的基本 previousElementSibling Property 如下所示。在这里，我们可以获取第二个节点的前一个兄弟节点。

<!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>

输出

使用javascript的属性，图像获取所需节点的前一个节点。

示例2

基本的previousElementSibling属性在控制台日志函数中显示输出。在这里，我们可以获取第三个节点的前一个兄弟节点。

<!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>

输出

图像得到null值是因为第一个必需节点使用了javascript属性。

Javascript previousElementSibling属性

示例3

使用带有条件的javascript的基本前一个兄弟节点属性的示例如下所示。在这里，我们可以同时获取第一个、第三和最后一个节点的前一个兄弟节点。我们可以使用空格或独立的标签来表示列表项。

<!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>

输出

使用javascript属性获取所需节点的多个先前节点的图像。

Javascript previousElementSibling属性

示例4

之前的兄弟节点属性用于所有没有空格的标签。它将数据显示为列表，但不一定列出标签。

<!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"> JavaTpoint </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>

输出

图像使用列表标签获取所需节点之前的多个节点。

Javascript previousElementSibling属性