資料結構
網路
關係資料庫管理系統
作業系統
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+ 閱讀量
廣告