关于javascript:javascript中的动态集合NodeListHTMLCollection

不晓得你有没有在控制台见到过相似这样的输入

咱们会发现，同样都是获取元素的代码，为啥一个是 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