javascript中的动态集合NodeList&HTMLCollection

不知道你有没有在控制台见到过类似这样的输出

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