不晓得你有没有在控制台见到过相似这样的输入
咱们会发现，同样都是获取元素的代码，为啥一个是 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