数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究JavaScript 中列表元素的兄弟节点？
在本文中，我们将学习 JavaScript 中列表元素的兄弟节点，并提供相应的示例。
要查找 JavaScript 中列表元素的兄弟节点，可以使用名为 nextSibling 的现有属性。nextSibling 属性返回同一树级别上的下一个节点。nextSibling 返回一个节点对象，它是一个只读属性。
注意 − nextSibling 属性返回下一个兄弟节点：元素节点、注释节点、文本节点。元素之间的空格也被视为文本节点。
现在，让我们了解一下 JavaScript 中 nextSibling 属性的语法和用法。
语法
在 JavaScript 中获取列表元素的兄弟节点的语法如下：
Node.nextSibling; or Node.nextElementSibling; or Node.previousSibling;
其中，Node 是一个元素，可以是“a”、“p”、“span”、“strong”等。返回兄弟元素。
示例 1
这是一个使用 nextSibling 属性在 JavaScript 中获取列表元素兄弟节点的示例程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sibling of a list element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Sibling of a list element in JavaScript using nextSibling property</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
</ul>
<p id="result"></p>
<script>
var ele = document.getElementById("m1").nextSibling;
document.getElementById('result').innerHTML = 'The next sibling for the id "m1" is : '+ele.innerHTML;
</script>
</body>
</html>
执行以上代码后，将生成以下输出。
示例 2
这是一个使用 nextElementSibling 属性在 JavaScript 中获取列表元素兄弟节点的示例程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sibling of a list element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Sibling of a list element in JavaScript using nextElementSibling property</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
</ul>
<p id="result"></p>
<script>
var nxt_sibling = document.querySelector("#m1").nextElementSibling;
document.getElementById('result').innerHTML = 'The next sibling for the id "m1" is : '+nxt_sibling.innerHTML;
</script>
</body>
</html>
执行以上代码后，将生成以下输出。
示例 3
这是一个使用 previousSibling 属性在 JavaScript 中获取列表元素兄弟节点的示例程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sibling of a list element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Sibling of a list element in JavaScript using previousSibling property</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
</ul>
<p id="result"></p>
<script>
var ele = document.getElementById("m3").previousSibling;
document.getElementById('result').innerHTML = 'The next sibling for the id "m3" is : '+ele.innerHTML;
</script>
</body>
</html>
执行以上代码后，将生成以下输出。
示例 4
这是一个使用 nextElementSibling 属性在 JavaScript 中获取列表元素兄弟节点的示例程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sibling of a list element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>To display all elements in a list using nextElementSibling property</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
<li id="m4">Oppo</li>
</ul>
<p id="result"></p>
<script>
var current_ele = document.querySelector("#m1");//Starting element
var next_ele = current_ele.nextElementSibling;
document.getElementById('result').innerHTML = 'TO display all the elements in a list :'+'<br/>'+'Current element : '+current_ele.innerHTML+'<br/>';
do{
document.getElementById('result').innerHTML += 'Next sibling : '+next_ele.innerHTML+'';next_ele = next_ele.nextElementSibling;
}while(next_ele);
</script>
</body>
</html>
执行以上代码后，将生成以下输出。
更新于： 2022-12-09
6K+ 阅读量
广告