Javascript previousSibling属性
previousSibling属性用于获取给定节点的前一个或较早的节点,类型为Node对象。如果给定的节点是列表中的第一个项目,则节点对象显示null。
previousSibling属性显示在树的同一级上指定节点之前的元素。该属性用于显示previousSibling节点,并且需要返回前一个兄弟节点作为文本节点、元素节点或注释节点。该属性只能用于读取网页。
请注意,children属性用于获取元素的所有子节点。我们可以在alert、console和innerHTML函数中获取前一个兄弟节点。
语法
以下语法给出了列表的前一个兄弟节点。
node.previousSibling
返回值
- 该属性将一个节点的前一个同级节点作为一个元素返回。
- 如果前一个同级节点不可用,则该属性返回null。
注意:不要在两个已经靠得非常近的元素之间放置空格,否则结果将为“undefined”。
示例
下面的示例演示了使用previousSibling属性输出多个值或节点的结果。
示例1
以下javascript示例显示了基本的previousSibling属性。在这里,我们可以获取第二个节点的前一个同级节点。
<!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>
输出
该图像显示前一个兄弟节点的值作为输出。
示例2
中的基本previousSibling属性在控制台日志函数中显示输出。在这里,我们可以获得第三个节点的前一个兄弟节点。
<!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>
输出
该图片显示了前一个兄弟节点的值作为输出。
示例3
在JavaScript中使用基本的previousSibling属性的条件示例如下。在这里,我们可以获取前一个兄弟节点的可用值。如果前一个兄弟节点可用,该属性显示列表值。如果前一个兄弟节点不可用,则该属性显示null值。
<!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>
输出
图像将前一个同级节点的值作为输出显示。输出为空,因为前一个同级节点不可用。
示例4
javascript中的基本previousSibling属性的条件示例如下所示。如果列表中没有空格,我们可以获取前一个兄弟节点的可用值。如果列表标记中有空格,则数据显示为未定义。
<!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>
输出
图像将未定义的值(列表中的空格)显示为输出。
示例5
javascript中基本的previousSibling属性的条件示例如下。在这里我们可以同时获取第一个、第三和最后一个节点的前一个兄弟节点。
<!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>
输出
图像显示前一个兄弟节点的值作为输出。输出为空,因为前一个兄弟节点不可用。
示例6
前一个兄弟节点属性用于所有没有空白的标签。它将数据显示为列表,但不一定列出标签。
<!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"> 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").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>
输出
该图像显示第二个节点的前一个兄弟节点。
支持的浏览器
以下是previousSibling属性适用的浏览器列表:
- Google Chrome版本1及以上
- Edge 12及更高版本
- Internet Explorer 5.5及更高版本
- Firefox 1及更高版本
- Opera 12.1及更高版本
- Safari 1及更高版本
结论
previousSibling节点在列表标签中查找先前或之前的节点,不包括空格。它是列表类型的数据或数组类型信息的基本和必需的JavaScript函数。