不知道你有沒有在控制枱見到過類似這樣的輸出

我們會發現，同樣都是獲取元素的代碼，為啥一個是NodeList，一個是HTMLCollection。
那麼這倆是啥？又有啥區別，本篇文章我們就聊聊這個。

NodeList

NodeList對象是節點的集合(類數組)。通常是由屬性，如Node.childNodes 和 方法（如document.querySelectorAll） 返回的。
在一些情況下，NodeList是一個實時集合，也就是説，如果文檔中的節點樹發生變化，NodeList 也會隨之變化。
例如，Node.childNodes 是實時的：

var parent = document.getElementById("parent");
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // 我們假設結果會是“2”
parent.appendChild(document.createElement("div"));
console.log(child_nodes.length); // 但此時的輸出是“3”

在其他情況下，NodeList 是一個靜態集合，也就意味着隨後對文檔對象模型的任何改動都不會影響集合的內容。比如 document.querySelectorAll 就會返回一個靜態 NodeList。

HTMLCollection

HTMLCollection對象是元素的集合（類數組），元素順序為文檔流中的順序。HTMLCollection是即時更新的，當其所包含的文檔結構發生改變時，它會自動更新。

備註： 由於歷史原因（DOM4 之前，實現該接口的集合只能包含 HTML 元素），該接口被稱為 HTMLCollection。

下面這些方法可以返回HTMLCollection.

document.getElementsByName
document.getElementsByTagName
document.getElementsByClassName
document.forms、document.forms[0].elements、 document.images、 document.links

總結

所以，總結下

• 相同點：

  • 二者都是類數組

• 不同點

  • NodeList是節點（12種）的集合、HTMLCollection是元素節點的集合
  • NodeList有靜態的、有動態的，HTMLCollection都是動態集合

參考文檔

• NodeList
• HTMLCollection
• javascript中的動態集合——NodeList、HTMLCollection、NamedNodeMap