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方法

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!