Javascript nextElementSibling属性

javascript中的nextElementSibling属性用于显示所需节点的下一个项。它用于显示给定输入节点的下一个数据或元素作为一个Node对象。如果可用节点是列表中的最后一个元素，则该节点对象显示null数据。

nextElementSibling属性显示了指定列表或同一树中的在其后的元素。它用于只读的网页信息。

语法：

下面是javascript中的nextElementSibling属性的语法。

<script>
Let variable_name = node.nextElementSibling.innerHTML;
</script>

属性

变量名作用是获取下一个节点的值并显示数据。
“node”作用是选择所需的节点以获取下一个节点元素。

返回值

该属性将下一个同级节点显示为同一树的元素。
如果下一个或后面的同级节点不可用，则该属性获取null。

示例

示例展示了使用该属性获取列表的下一个元素。

示例1

基本的nextElementSibling属性在控制台日志函数中显示输出。在这里，我们可以获取第一个和第三个节点的上一个同级节点。使用javascript属性可以直接查看列表的下一个数据的相关信息。

<!DOCTYPE html>
<html>
<body>
<h3> The nextElementSibling Property in javascript </h3>
<p> The Javascript nextElementSibling property support white space in the list tag. </p>
<p> Given Example list: </p>
<ul>
<li id = "item1"> Web developer (First) </li>
<li id = "item2"> UI developer (second) </li>
<li id = "item3"> UX developer (Third) </li>
<li id = "item4"> Front-end developer (fourth) </li>
<li id = "item5"> back - end developer </li>
</ul>
<p> see the below data as the next element node value and object. </p>
<p id = "demo_var_value" style = "color:red; "></p>
<p id = "demo_var_value1" style = "color:green;"></p>

<script>
    var var_value = document.getElementById("item1").nextElementSibling.innerHTML; 
document.getElementById("demo_var_value").innerHTML = "The nextElementSibling node of third node : " +var_value;
    var var_value1 = document.getElementById("item3"). nextElementSibling.innerHTML; 
document.getElementById("demo_var_value1").innerHTML = "The nextElementSibling node of third node : " +var_value1;
</script>
</body>
</html>

输出

由于第一个必需节点使用JavaScript属性，图像获取了空值。

Javascript nextElementSibling属性

示例2

javascript中的基本nextElementSibling属性，带有条件示例如下所示。在这里，我们可以同时获取第一个、第三个和最后一个节点的下一个兄弟节点。可以使用空格或单独的标签作为列表项。

<!DOCTYPE html>
<html>
<body>
<h3> The nextElementSibling Property in javascript </h3>
<p> The Javascript nextElementSibling 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 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("item2").nextElementSibling.innerHTML; 
    document.getElementById("demo_var_value").innerHTML = "The nextElementSibling node of second node : "+var_value;
    var var_value3 = document.getElementById("item1").nextElementSibling.innerHTML; 
   if(var_value3 == null){
    document.getElementById("demo_var_value3").innerHTML = "The nextElementSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The nextElementSibling node of first node : " +var_value3;
}
}
</script>
</body>
</html>

输出

使用JavaScript属性，图像获取所需节点的多个先前节点。

Javascript nextElementSibling属性

示例3

下一个兄弟节点属性用于所有没有空格的标签类型。它以列表形式显示数据，但不一定列出标签。在这里我们可以通过获取第一个和最后一个节点来获取下一个元素所需的值。<p> 标签在 <div> 标签中作为同一树的多个项。

<!DOCTYPE html>
<html>
<body>
<h3> The nextElementSibling Property in javascript </h3>
<p> The Javascript nextElementSibling property does not support IE8 and before versions. </p>
<div>
<p id = "item1"> JavaTpoint </p>
<p id = "item3"> online data </p>
<p id = "item4"> video tutorial </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").nextElementSibling;
document.getElementById("demo_var_value").innerHTML = "the second nodes privious sibling node : "+var_value;
var var_value3 = document.getElementById("item1").nextElementSibling.innerHTML;
if(var_value3 == null){
document.getElementById("demo_var_value3").innerHTML = "The nextElementSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The nextElementSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>

输出

该图像使用列表标记获取所需节点的多个下一节点。

Javascript nextElementSibling属性