不知道你有沒有在控制檯見到過類似這樣的輸出
我們會發現，同樣都是獲取元素的程式碼，為啥一個是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都是動態集合