如何使用 JavaScript 獲取元素的第一個和最後一個子元素

要獲取 HTML 元素的第一個子節點，可以使用 firstChild 財產。此屬性返回節點的第一個子節點，作為 Node 對象。

假設您有以下 HTML 代碼片段：

<ul id="langs">
    <li>JavaScript</li>
    <li>Node</li>
    <li>Java</li>
    <li>Ruby</li>
    <li>Rust</li>
</ul>

以下示例選擇第一個 <li> 使用 firstChild 元素 屬性：

const ul = document.querySelector('#langs');

// get first child
const first = ul.firstChild;

console.log(first.innerText);

您可能會遇到 firstChild 的奇怪行為 如果父節點和第一個子節點之間有空格。

例如，上面的代碼片段可能會打印 undefined 在控制台上。這是因為元素內部的空白被視為文本，而文本被視為節點。

處理這種情況的一種方法是刪除元素之間的所有空格。或者，您可以使用 firstElementChild 忽略空格和註釋並返回第一個元素節點的屬性：

// get first element node
const first = ul.firstElementChild;

console.log(first.innerText); // JavaScript

要返回指定節點的最後一個子節點，請使用 lastChild 屬性：

const ul = document.querySelector('#langs');

// get last child
const last = ul.firstChild;

console.log(last.innerText);

同樣，還有一個名為 lastElementChild 的屬性 通過忽略所有空格和註釋來獲取最後一個元素節點：

const last = ul.lastElementChild;

console.log(last.innerText); // Rust

如果要獲取元素的所有子節點，請使用 childNodes 或 children 屬性：

const ul = document.querySelector('#langs');

// get all children
const childern = ul.childNodes;

// iterate over all child nodes
childern.forEach(li => {
    console.log(li.innerText);
});

看看這篇文章了解更多childNodes 和 children JavaScript 中的屬性。