JavaScript 中的 PreviousSibling 属性

2025年3月18日 | 阅读 5 分钟

previousSibling 属性用于将给定节点之前的节点作为 Node 对象获取。如果给定节点是列表中的第一个项，则节点对象显示为 null。

previousSibling 属性显示的是在树的同一级别上位于您指定的元素之前的那个元素。该属性用于显示 previousSibling 节点，并且需要返回前面的同级节点，可以是文本节点、元素节点或注释节点。此属性对于网页是只读的。

请注意，children 属性用于获取元素的所有子节点。我们可以在 alert、console 和 innerHTML 函数中获取前一个同级节点。

语法

以下语法给出了列表的前一个同级节点。

返回值

此属性以元素的形式给出节点的上一个同级节点。
如果上一个同级节点不可用，此属性将返回 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 中带条件的 basic 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> 

输出

图像显示了前一个同级节点的值作为输出。输出为 null，因为前一个同级节点不可用。

示例 4

JavaScript 中带条件的 basic previousSibling 属性示例如下。在这里，如果列表没有空格，我们可以获取前一个同级节点的可获取值。如果列表标签之间有空格，则数据显示为 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>

输出

图像显示了未定义值（列表中的空格）作为输出。

示例 5

JavaScript 中带条件的 basic 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>

输出

图像显示了前一个同级节点的值作为输出。输出为 null，因为前一个同级节点不可用。

示例 6

previousSibling 节点属性用于所有没有空格的标签。它以列表形式显示数据，但不一定列出标签。

<!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"> TpointTech </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 函数。

下一主题JavaScript sessionStorage

JavaScript 中的 PreviousSibling 属性

返回值

注意：不要在两个紧密相邻的元素之间放置空格，否则结果将是“undefined”。

示例

支持的浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 中的 PreviousSibling 属性

返回值

注意：不要在两个紧密相邻的元素之间放置空格，否则结果将是“undefined”。

示例

支持的浏览器

结论

相关帖子

使用 JavaScript 遍历数组对象

JavaScript Fetch API

Javascript regexp 前瞻

如何在 javascript 中使用 mouseup 事件

Javascript 中的 textContent

JavaScript String startsWith

npm Install 命令

后端项目创意

如何使用 JavaScript 创建动态表格

获取 JavaScript 中节点的子元素

订阅 Tpoint Tech

联系信息