极客笔记Javascript NextSibling属性
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、console和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>
输出
图像显示了下一个兄弟节点的值作为输出。由于下一个兄弟节点不可用，所以输出得到一个空值。
示例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>
输出
作为输出，图像显示的是一个未定义的值（列表中的空格）。
示例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>
输出
图像显示下一个兄弟节点的值作为输出。输出为空，因为下一个兄弟节点不可用。
示例6
下一个同级节点属性用于所有没有空格的标签。它以列表形式显示数据，但不一定列出标签。
<!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"> 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("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页面上使用没有空格的列表对象和项。