JavaScript 中的 NextSibling 属性

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

nextSibling 属性获取给定节点的下一个节点，返回一个 Node 对象。如果给定节点是列表中的最后一项，则节点对象为 null。nextSibling 属性显示树的同一级别中紧随您指定的节点之前的元素。此属性对网页是只读的。

该属性用于显示下一个同级节点，它需要返回一个文本节点、元素节点或注释节点作为下一个同级节点。请注意，children 属性可用于获取元素的所有子节点。

语法

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

node.nextSibling

返回值

该属性将节点的下一个同级节点显示为一个元素。
如果下一个同级节点不可用，该属性将显示 null。

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

支持的浏览器

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

Google Chrome 1 及以上版本
Edge 12 及更高版本，以及
Internet Explorer 5.5 及更高版本
Firefox 1 及更高版本
Opera 12.1 及更高版本
Safari 1 及更高版本

示例

以下示例使用 nextSibling 属性获取多个值或节点。

示例 1

JavaScript 中的基本 nextSibling 属性示例如下。我们可以在这里获取第二个节点的下一个同级节点。输出显示在 innerHTML、控制台和 alert 函数中。

<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling 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 button below to get the second node's next sibling 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").nextSibling.innerHTML; 
    document.getElementById("demo_var_value").innerHTML = var_value;
}
</script>
</body>
</html>

输出

图像显示了下一个同级节点的值作为输出。

示例 2

基本 nextSibling 属性在控制台日志函数中显示输出。我们可以在这里获取第三个节点的下一个同级节点。

<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling 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 the next in the console tab. </p>
<button onclick = "myclickFunction()"> Click Here </button>
<script>
function myclickFunction() {
    var var_value = document.getElementById("item3").nextSibling.innerHTML; 
console.log("The nextSibling Property in javascript ");
console.log(var_value);
}
</script>
</body>
</html>

输出

图像显示了下一个同级节点的值作为输出。

示例 3

JavaScript 中带条件的 nextSibling 属性基本示例如下。我们可以在这里获取下一个同级节点可用的值。如果下一个同级节点可用，则该属性显示列表值。如果下一个同级节点不可用，则该属性获取 null 值。

<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling 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 the next 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("item4").nextSibling; 
console.log(var_value);
if(var_value == null){
    document.getElementById("demo_var_value").innerHTML = "The nextSibling node does not available : " +var_value;
}else{
document.getElementById("demo_var_value").innerHTML = var_value;
}
}
</script>
</body>
</html> 

输出

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

示例 4

JavaScript 中带条件的 nextSibling 属性基本示例如下。如果列表没有空格，我们可以获取下一个同级节点可用的值。如果列表标签有空格，则数据获取为 undefined。

<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling 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 the next 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").nextSibling; 
console.log(var_value);
if(var_value == null){
    document.getElementById("demo_var_value").innerHTML = "The nextSibling node does not available : " +var_value;
}else{
document.getElementById("demo_var_value").innerHTML = var_value;
}
}
</script>
</body>
</html>

输出

作为输出，图像显示了一个 undefined 值（列表中的空格）。

示例 5

JavaScript 中带条件的 nextSibling 属性基本示例如下。我们可以在这里同时获取第一个、第三个和最后一个节点的下一个同级节点。

<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling 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 the next 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("item1").nextSibling.innerHTML; 
    document.getElementById("demo_var_value").innerHTML = "the second nodes next sibling node : "+var_value;
    var var_value2 = document.getElementById("item3").nextSibling.innerHTML; 
    document.getElementById("demo_var_value2").innerHTML = "the last nodes next sibling node : "+var_value2;
    var var_value3 = document.getElementById("item4").nextSibling; 
   if(var_value3 == null){
    document.getElementById("demo_var_value3").innerHTML = "The nextSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The nextSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>

输出

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

示例 6

nextSibling 属性用于所有没有空格的标签。它将数据显示为列表，但不一定显示标签。

<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling property does not support white space in the list tag. </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("item1").nextSibling.innerHTML; 
    document.getElementById("demo_var_value").innerHTML = "the second nodes next sibling node : "+var_value;
    var var_value3 = document.getElementById("item2").nextSibling; 
   if(var_value3 == null){
    document.getElementById("demo_var_value3").innerHTML = "The nextSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The nextSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>

输出

图像显示了第二个节点的下一个同级节点。

结论

nextSibling 属性有助于查找列表中对象的下一个元素。我们可以使用列表标签或其他格式的标签。我们可以在 html 页面上使用没有空格的列表对象和项目。

下一个主题JavaScript 中的 PreviousSibling 属性

← 上一个下一个 →

JavaScript 中的 NextSibling 属性

语法

返回值

注意：不要在两个相邻的元素之间放置空格，否则结果将是“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 中的 NextSibling 属性

语法

返回值

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

支持的浏览器

示例

结论

相关帖子

如何使用 JavaScript 在网站上添加 WhatsApp 分享按钮

如何在 JavaScript 中编写函数

JavaScript Select Option

npm Install 命令

JavaScript 中的浅拷贝

使用 JavaScript 检测大写锁定键是否开启或关闭

JavaScript Window close 方法

WebSocket 是什么？

如何在 Android 上启用 JavaScript

如何使用 JavaScript 计算圆的周长和面积

订阅 Tpoint Tech