DOM HTMLCollection
HTMLCollection
HTMLCollection是HTML元素的類陣列集合（列表）。
集合中的元素可以透過索引（從0開始）訪問。
length 屬性 返回集合中的元素數量。
HTMLCollection 與 NodeList
HTMLCollection 與 NodeList 幾乎相同。
請參閱下面的說明。
屬性和方法
以下屬性和方法可用於 HTMLCollection
| 名稱 | 描述 |
|---|---|
| length | 返回 HTMLCollection 中元素的數量 |
| item() | 返回指定索引處的元素 |
| namedItem() | 返回具有指定 ID 的元素 |
示例
示例
文件中 <p> 元素的數量為
const elements = document.getElementsByTagName("p");
let numb = elements.length;
自己動手試一試 »
示例
遍歷 HTMLCollection 中的元素
const elements = document.getElementsByTagName("*");
for (let i = 0; i < elements.length; i++) {
.. 某些程式碼 ..
}
自己動手試一試 »
不是陣列
HTMLCollection 不是陣列！
HTMLCollection 可能看起來像陣列，但它不是。
您可以遍歷 HTMLCollection 並透過索引引用其元素。
但您不能在 HTMLCollection 上使用 push()、pop() 或 join() 等陣列方法。
HTMLCollection 和 NodeList 的區別
NodeList 和 HTMLCollection 非常相似。
兩者都是從文件中提取的節點（元素）的類陣列集合（列表）。節點可以透過索引號訪問。索引從 0 開始。
兩者都有一個 length 屬性，返回列表中（集合中）元素的數量。
HTMLCollection 是 文件元素 的集合。
NodeList 是 文件節點 的集合（元素節點、屬性節點和文字節點）。
HTMLCollection 的專案可以透過它們的名稱、ID 或索引號訪問。
NodeList 的專案只能透過它們的索引號訪問。
HTMLCollection 始終是 即時 集合。示例：如果您在 DOM 中向列表中新增一個 <li> 元素，HTMLCollection 中的列表也會隨之更改。
NodeList 通常是 靜態 集合。示例：如果您在 DOM 中向列表中新增一個 <li> 元素，NodeList 中的列表將不會更改。
getElementsByClassName() 和 getElementsByTagName() 方法返回一個即時的 HTMLCollection。
querySelectorAll() 方法返回一個靜態的 NodeList。
childNodes 屬性返回一個即時的 NodeList。
