javascript - 为什么 document.querySelector 返回一个 Element 而 document.querySelectorAll 返回一个 NodeList

Question

文档说document.querySelectorreturn an Elementwhiledocument.querySelectorAll返回 a NodeList。为什么会有这种差异？为什么要document.querySelectorAll返回一个Element数组？

注意：标记为重复的问题没有回答我的问题，即为什么document.querySelectorAll不返回Element数组？document.querySelector在与返回“元素”相同的行上。前者只是后者的复数形式。

标签： javascript

Answer 1

对于document.querySelectorAll()，在 MDN 上，它是这样说的：

[it] 返回一个静态（非实时）NodeList，表示文档元素的列表

因此，NodeList确实包含一个元素列表。之所以将这种特定的数据结构称为“NodeList”而不仅仅是“ElementList”，是因为它可以包含除元素之外的其他类型的节点（例如注释节点、文本节点或片段节点）。document.querySelectorAll()只会返回一个包含元素的 NodeList，但其他函数/属性（例如.childNodes 属性）可能会生成带有其他类型节点的节点列表。

nodeList 有一个数组没有的特殊属性，即 nodeList 可以是“实时的”，这意味着它会在 DOM 发生更改时自动更新。但是，这不适用于 document.querySelectorAll()，因为 querySelectorAll() 将始终返回非活动节点列表。据我所知，他们本可以简单地返回一个元素数组，但可能选择返回一个 nodeList 以保持他们的浏览器 API 彼此一致。也许他们可以对 nodeList 数据结构进行某些隐藏的优化。