Javascript previousElementSibling 属性

2025年3月18日 | 阅读时长 4 分钟

JavaScript 的 previousElementSibling 属性用于将所需或输入节点的上一个节点显示为 Node 对象。如果给定节点是列表中的第一个元素，则 nodes 对象显示 null。

previousElementSibling 属性用于获取同一树级别上指定元素之前的元素。此属性只能在网页上读取。

语法

以下语法使用 previousElementSibling 属性给出了列表中的前一个同级节点。

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

返回值

该属性将前一个同级节点显示为元素。
如果前一个同级节点不存在，则该属性返回 null。

支持的浏览器

以下是 previousElementSibling 属性支持的浏览器列表

谷歌浏览器
Internet Explorer
火狐
Opera
Safari
边

示例

以下示例使用 previousElementSibling 属性显示多个值或节点。

示例 1

JavaScript 示例中的基本 previousElementSibling 属性显示如下。在这里，我们可以获取第二个节点的上一个同级节点。

<!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 属性。

previousElementSibling Property in javascript

示例 3

带有条件的 JavaScript 中基本 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_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 属性获取所需节点的多个上一个节点。

Example4

previous sibling 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>
<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").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 元素会显示列表中不带空格的上一个值。列表数据、哈希数据和其他多项信息使用 previousElementSibling 属性进行操作、控制和显示。

下一主题JavaScript 中的 Base64 解码

Javascript previousElementSibling 属性

语法

支持的浏览器

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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 previousElementSibling 属性

语法

支持的浏览器

示例

结论

相关帖子

从 JavaScript 的 select 列表中移除选项

如何使用 JavaScript 获取 PI 的值

移除数组中的重复项

JavaScript 中的 PreviousSibling 属性

创建 JavaScript 倒计时计时器

如何检查 JavaScript 中的空对象

JavaScript hasOwnProperty

JavaScript 工厂函数

JavaScript onunload 事件

如何在 JavaScript 中编写函数

订阅 Tpoint Tech

联系信息

关注我们