左小白的技术日常
Github

HTMLCollection 和 NodeList 有什么区别

这篇文章发布于 2020/12/30,归类于
标签:
HTMLCollectionNodeListHTMLCollection与NodeList区别

在获取 dom 节点结集合时,有的 API 返回的是 HTMLCollection 类型,有的是 NodeList 类型。他们有什么区别呢?下来看看具体的 API

返回 HTMLCollection 类型的 API

返回 NodeList 类型的 API

HTMLCollection 和 NodeList 的相同点:

  1. 它们都是表示节点集合的类数组对象,都可以是活动对象(实时监听 dom 变化并修改值)
  2. 它们都有 length 属性,都可以通过 item() 和数组下标的方式访问内部元素。都实现了 Symbol.iterator 迭代器方法(可以被 for...of 遍历)

HTMLCollection 和 NodeList 的不同点:

关于 document.querySelectorAll() 函数的特殊情况,理论上该函数获取的是元素集合,可以使用 HTMLCollection,但为什么使用了 NodeList 呢?来看下面的例子

a = document.querySelectorAll('div')
b = document.getElementsByTagName('div')
console.log(a.length, b.length) // 75 75
document.body.appendChild(document.createElement('div'))
console.log(a.length, b.length) // 75 76
console.log(document.querySelectorAll('div').length) // 76
console.log(document.getElementsByTagName('div').length) // 76

上面的例子中 getElementsByTagName 获取的 HTMLCollection 类型的集合是实时的,动态的。而 querySelectorAll 获取的 NodeList 是非实时的,是静态的。

我的理解是,HTMLCollection 可能不支持创建静态副本。而 NodeList 可以是动态的活动对象,比如 element.childNodes,也可以是静态的,比如 querySelectorAll() 返回值。

参考: