JavaScript 中的 HTMLCollection 簡介
一個HTMLCollection 是一個類似數組的對象，表示從文檔中提取的 HTML 元素的集合。它總是實時 和有序 ，這意味著對 DOM 的修改會自動應用於集合元素。
在本文中，我們將了解 HTMLCollection 詳細介紹它是什麼以及如何在 JavaScript 中使用它。我們還將簡要介紹 HTMLCollection 之間的區別 和一個 NodeList，它是另一個類似於 HTMLCollection 的對象 .
創建一個 HTMLCollection
getElementsByTagName() 返回一個 HTMLCollection 目的。以下示例選擇 all <p> 文檔中的元素：
const elems = document.getElementsByTagName('p');
集合中的元素可以通過數字索引、名稱或 ID 訪問。訪問第三個 <p> 在集合中，你可以寫：
const p = document.getElementsByTagName('p')[2];
要按名稱或 ID 訪問元素，HTMLCollection 提供 namedItem() 方法。以下示例獲取 <p> ID 為 notify 的標籤 來自收藏：
const elems = document.getElementsByTagName('p');
// select <p> with ID `notify`
const p = elems.namedItem('notify');
HTMLCollection的長度
就像 NodeList , HTMLCollection 還支持length 返回集合內元素總數的屬性：
const elems = document.getElementsByTagName('p');
// print total elements
console.log(elems.length);
length 當你想遍歷集合中的 HTML 元素時，屬性非常有用：
const elems = document.getElementsByTagName('p');
// loop all collection elements
for (let i = 0; i < elems.length; i++) {
elems[i].style.color = 'red';
}
迭代 HTMLCollection
除了我們上面討論的簡單 for 循環之外，for...of 語句還可以用於迭代 HTMLCollection ：
const elems = document.getElementsByTagName('p');
// iterate using for...of loop
for (const p of elems) {
console.log(p.innerText);
}
不同於 NodeList , HTMLCollection 不支持 forEach() 方法。但是，您可以使用 Array.from() 轉換HTMLCollection的方法 到一個普通數組，然後使用 forEach() 對其進行迭代：
const elems = document.getElementsByTagName('p');
// itereate using forEach()
Array.from(elems).forEach((p, index) => {
console.log(p.innerText);
});
查看本指南，了解更多關於迭代 DOM 元素的不同方法。
HTMLCollection 與數組
一個 HTMLCollection 對象可能看起來像一個數組，但它不是一個數組。兩者都是完全不同的東西。就像數組一樣，您可以遍歷集合併通過索引號引用其元素。
但是，您不能使用 push() 等常見的數組方法 , pop() , join() , 和 valueOf() 在 HTMLCollecton 上 .
HTMLCollection 與 NodeList
兩者都是 HTMLCollection 和 NodeList 是 DOM 元素的集合。唯一的區別 在於它們提供的方法，也在於它們可以存儲的節點類型。
HTMLCollection 只能 包含 HTML 元素，而 NodeList 可以包含任何內容，HTML 元素、註釋、屬性、文本等。
一個 HTMLCollection 提供與 NodeList 相同的方法 還有一個名為 nameItem() 的方法 按名稱或 ID 訪問集合元素。 NodeList 元素只能通過數字索引訪問。
NodeList 和 HTMLCollection 不是 數組，所以你不能使用像 push() 這樣的數組方法 , pop() , join() , 和 valueOf() 對他們倆來說。
總結
在本文中，我們了解了 HTMLCollection 對象，以及如何在 JavaScript 中使用它。簡而言之：
- 一個
HTMLCollection是一個類似數組的 HTML 元素集合 . - 一個
HTMLCollection總是活著 ，這意味著您可以修改集合元素，這些更改將自動應用。 document.getElementsByTagName()方法可用於提取HTMLCollection來自 DOM。length屬性返回HTMLCollection內的元素總數 對象。- 您可以使用簡單的 for 循環（適用於舊瀏覽器）或 for...of 語句來遍歷集合元素。
- 一個
HTMLCollection是不是 一個數組，所以不能在上面使用常用的數組方法。 - 一個
HTMLCollection類似於 NodeList，但只存儲 HTML 元素，並提供了一種按名稱或 ID 訪問元素的附加方法。
