HTMLCollection v.s. NodeList

本文参考了知乎上贺师俊对相关问题的回答: https://www.zhihu.com/question/31576889

在DOM中,有两种类型可用于存储对象的集合:HTMLCollection和NodeList。由于DOM标准历史变化的原因,造成了一些混乱,所幸目前这两种类型之间的区别已经比较清晰了。

HTMLCollection

HTMLCollection类型用于存储元素的集合,因此像xxx.children和xxx.getElementsByXXX等访问语句所返回的都是HTMLCollection对象。《JavaScript权威指南》中描述xxx.getElementsByTagName返回的是NodeList对象 ,这一点并不正确。

与NodeList对象不同,HTMLCollection对象拥有一个叫做namedItem('somename')的方法,可通过调用该方法获得HTMLCollection集合中id或name值为"somename"的成员。

NodeList

NodeList类型用于存储节点(元素+文本节点)的集合,因此像xxx.childNodes这样的访问语句所返回的都是NodeList对象。

NodeList对象没有namedItem方法。

特殊情况

  • querySelectorAll方法返回的是元素的集合,但其类型为NodeList。HTMLCollection和NodeList一般情况下是实时的(live),但querySelectorAll方法所返回的NodeList却是静态的。
  • document.getElementsByName方法返回的是元素的集合,但其类型为NodeList(实时的)。

对比

综上所述,除开特殊情况,HTMLCollection和NodeList的对比如下:

HTMLCollection NodeList
元素集合 节点集合(元素+文本节点)
xxx.children和xxx.getElementsByXXX等 xxx.childNodes等
有namedItem方法 无namedItem方法