JavaScript nextSibling 屬性
Anika Tabassum Era
2024年2月15日
JavaScript
JavaScript Property
在 JavaScript 中，我們有 nextSibling 和 nextElementSibling 屬性。從技術上講，兩者具有相似的功能，但 nextSibling 在定義節點時更加明確。
nextSibling 屬性獲取某個指定節點的下一個節點。在這種情況下，節點可以是元素節點、文字節點或註釋節點，但 nextElementSibling 只專注於抓取元素節點並丟棄所有其他字元、空格等。
在這裡，我們將只視覺化 nextSibling 屬性如何執行以及即將到來的節點的檢索。這個總體任務是跟蹤 HTML 結構和更好的使用目的。
在 JavaScript 中使用 nextSibling 屬性獲取元素節點
我們將在以下示例中建立 3 個 p 標籤，每個標籤都有其 id。讓我們考慮一下 p 元素之間沒有任何空格或任何其他字元，只有裸標籤。
我們將獲取 script 標籤中的 first 元素，並檢查它在後面的案例中顯示的內容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<p id="first">First</p><p id="second">Second</p><p id="third">Third</p>
<script>
console.log( document.getElementById('first').nextSibling.innerText);
console.log( document.getElementById('first').nextSibling.nextSibling.innerText);
</script>
</body>
</html>
輸出：
正如我們已經考慮過的第一個 p 標籤，緊鄰的下一個節點是 id="second"元素節點。類似地，我們通過對第一個節點使用兩次 nextSibling 屬性來安慰 "second" 旁邊的元素節點，即 "third"。
在 JavaScript 中使用 nextSibling 屬性獲取文字節點
nextSibling 屬性考慮了元素節點、文字節點和評論節點。因此，如果我們可以檢測到任何文字節點和空格，nextSibling 屬性會將其計為下一次出現。
在我們的例子中，我們將一個接一個地設定 p 標籤，然後是一個空格。因此，我們將得到 undefined，它指的是單個空格、空格、 等等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<p id="first">First</p>
<p id="second">Second</p>
<p id="third">Third</p>
<script>
console.log( document.getElementById('first').nextSibling.innerText);
console.log( document.getElementById('first').nextSibling.nextSibling.innerText);
</script>
</body>
</html>
輸出：
所以，第一個節點之後的下一個節點是一個文字節點，即 space，因此我們得到 undefined 作為輸出，下一個節點現在是"second"元素節點。這可以推斷出 nextSibling 屬性不會忽略任何節點。
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
