JavaScript nextSibling 屬性

Anika Tabassum Era 2024年2月15日

JavaScript JavaScript Property

在 JavaScript 中使用 nextSibling 屬性獲取元素節點
在 JavaScript 中使用 nextSibling 屬性獲取文字節點

在 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>

輸出：

使用 nextSibling 屬性獲取元素節點

正如我們已經考慮過的第一個 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>