HTMLCollection與NodeList有什麼區別，以及如何獲取它們

在Web開發中，HTMLCollection 和 NodeList 是常見的DOM對象集合，用來存儲多個DOM元素。雖然它們看似相似，但在行為和特性上有一些顯著的區別。理解這些差異對於高效操作DOM元素至關重要。

1. HTMLCollection

HTMLCollection 是一種實時更新的集合。當DOM結構發生變化時，HTMLCollection會自動反映出這些變化。它僅包含元素節點，因此不會存儲文本節點或註釋節點等其它類型的節點。

特點

• 實時更新：當DOM結構變化時，HTMLCollection自動更新。
• 訪問方式多樣：可以通過索引、length屬性，或元素的id或name屬性來訪問其中的元素。
• 僅包含元素節點：忽略文本節點和註釋節點。

獲取方式

• document.getElementsByTagName(tagName)：通過標籤名獲取元素集合。
• document.getElementsByClassName(className)：通過類名獲取元素集合。
• document.forms、document.images、document.links：也會返回HTMLCollection。

1
const divs = document.getElementsByTagName("div"); // 返回 HTMLCollection

2. NodeList

NodeList 是一個包含所有類型節點（元素節點、文本節點、註釋節點等）的集合。它可以是靜態的（即不隨DOM變化更新），也可以是實時的，取決於獲取它的方式。

特點

• 非實時更新：通過querySelectorAll獲取的NodeList是靜態的，不會自動更新。
• 包含所有類型的節點：除了元素節點，它還能存儲文本節點、註釋節點等。
• 支持多種遍歷方式：可以通過forEach()遍歷NodeList（現代瀏覽器支持）。

獲取方式

• document.querySelectorAll(selector)：返回靜態的NodeList。
• document.childNodes：返回包含所有子節點（元素、文本、註釋等）的實時NodeList。
• parentNode.childNodes：獲取某個節點的所有子節點，返回NodeList。

1
const divs = document.querySelectorAll("div"); // 返回靜態的 NodeList

主要區別總結

1. 類型差異：

   • HTMLCollection 只包含元素節點。
   • NodeList 可以包含所有類型的節點（元素、文本、註釋等）。

2. 實時性：

   • HTMLCollection 是實時更新的。
   • NodeList 通過 querySelectorAll() 獲取時是靜態的，而 childNodes 獲取時是實時的。

3. 遍歷方式：

   • HTMLCollection 可以通過索引訪問元素，但不支持 forEach()。
   • NodeList 支持 forEach() 進行遍歷，且使用靈活。

選擇建議

• 當需要操作動態DOM結構時，選擇 HTMLCollection 更合適，因為它會隨著DOM的變化自動更新。
• 如果只是需要一次性的靜態元素集合，NodeList 是更好的選擇，特別是通過 querySelectorAll() 獲取的靜態 NodeList。

代碼示例

1
// 獲取 HTMLCollection
2
let htmlCollection = document.getElementsByClassName("example");
3
console.log(htmlCollection); // 實時更新的集合
4

5
// 獲取 NodeList
6
let nodeList = document.querySelectorAll(".example");
7
console.log(nodeList); // 靜態的集合
8

9
// 遍歷 NodeList
10
nodeList.forEach((element) => {
11
  console.log(element);
12
});

通過理解HTMLCollection與NodeList的區別，開發者可以更靈活地操作DOM，提高代碼的性能與可維護性。