如何使用 JavaScript 獲取元素的子元素

要獲取元素的所有子節點，可以使用 childNodes 財產。此屬性返回節點子節點的集合，作為 NodeList 對象。

默認情況下，集合中的節點按其在源代碼中的外觀排序。您可以使用數字索引（從 0 開始）來訪問各個節點。

假設您有以下 HTML 代碼：

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

以下示例選擇 <ul> 的所有子節點 標記並打印它們的內容：

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

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

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

下面是輸出的樣子：

undefined
JavaScript
undefined
Node
undefined
Java
undefined
Ruby
undefined
Rust
undefined

等等，為什麼是 undefined 出現在輸出中？

這是因為元素內部的空白被視為文本，而文本被視為節點。它也適用於被視為節點的評論。

如果您想排除註釋和文本節點 , 使用 children 而是財產。此屬性僅返回節點元素節點的集合，作為 HTMLCollection 對象：

const children = ul.children;

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

現在的輸出如下所示：

JavaScript
Node
Java
Ruby
Rust

為了獲取元素的第一個和最後一個子元素，JavaScript 提供了 firstChild 和 lastChild 屬性：

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

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

// get last children
const lastChild = ul.lastChild;