javascript中的动态集合NodeListHTMLCollection

2024-02-26 00:00:00 javascript 集合 动态

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

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

相关文章