queryAll 和 querySelectorAll 有什么区别

Question

definitions from the DOM Standard 似乎几乎一模一样，我不明白其中的区别。

queryAll 和 querySelectorAll 有什么区别。

DOM 标准的求值逻辑如下，但我不够聪明，看不懂。

query & queryAll

要将相对选择器字符串 relativeSelectors 与集合匹配，请运行以下步骤：

让 s 是从 relativeSelectors 中针对 set 解析相对选择器的结果。 [选择器]

如果 s 失败，则抛出 JavaScript TypeError。

返回使用 :scope 元素集评估选择器 s 的结果。 [选择器]

query(relativeSelectors) 方法必须返回运行匹配相对选择器字符串relativeSelectors 与由上下文对象组成的集合的第一个结果，如果结果为空列表，则返回null。

queryAll(relativeSelectors) 方法必须返回一个 Elements 数组，该数组使用运行结果将相对选择器字符串 relativeSelectors 与由上下文对象组成的集合相匹配。

querySelector & querySelectorAll

要将选择器字符串选择器与节点进行范围匹配，请运行以下步骤：

让 s 成为解析选择器选择器的结果。 [选择器]

如果 s 失败，则抛出 JavaScript TypeError。

使用作用域根节点和作用域方法范围过滤，返回针对节点根计算选择器 s 的结果。 [选择器]。

querySelector(selectors) 方法必须返回针对上下文对象运行范围匹配选择器字符串选择器的第一个结果，如果结果为空列表，则返回 null。

querySelectorAll(selectors) 方法必须返回针对上下文对象运行范围匹配选择器字符串选择器的静态结果。

Answer 1

2016 年更新

queryAll 已从 DOM 规范中删除

目前queryAll 和querySelectorAll 之间最重要的区别是queryAll（以及query）已从 DOM 规范中删除。

DOM 规范的当前版本位于：

• http://dom.spec.whatwg.org/

注意：https://www.w3.org/TR/dom/ 是 DOM 标准的过时分支 （有关更多信息，请参阅 WHATWG Wiki 和 the comment by Domenic 上的 Fork tracking）。

最后提及

包含query 和queryAll 的最新版本于2016 年3 月15 日发布：

• http://web.archive.org/web/20160315085447/https://dom.spec.whatwg.org/
  • 见章节 4.2.3. Interface ParentNode 和 4.2.6. Collections: Elements

删除

下一个版本不会在任何地方提及query 或queryAll：

• http://web.archive.org/web/20160329233515/https://dom.spec.whatwg.org/
  • 见章节 4.2.6. Mixin ParentNode

当前规格

query 或 queryAll 的所有出现 在 DOM 标准 were commented out 中，由 Anne van Kesteren 于 2016 年 3 月 29 日撰写。

当前的 DOM 规范（截至 2016 年 7 月）根本没有提及 query 或 queryAll：

• http://dom.spec.whatwg.org/

querySelector 和 querySelectorAll 在部分 4.2.6 Mixin ParentNode.

目前看来唯一可靠的API是querySelector和querySelectorAll （有关更多详细信息，请参阅 this answer）并根据 this discussion on GitHub query 和 queryAll 在浏览器中实现内置的 JavaScript 子类之前将不可用，即使那样它也不太可能返回实时Elements[] 数组，如the answer by BoltClock 中所述。

浏览器支持

截至 2016 年 6 月，MDN 上没有提及 query 和 queryAll：

• https://developer.mozilla.org/en-US/search?q=queryall

另一方面，querySelector 和 querySelectorAll 有据可查并得到广泛支持：

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

querySelector/querySelectorAll 的浏览器支持根据 Can I use 截至 2016 年 6 月：

（有关最新信息，请参阅：http://caniuse.com/queryselector）

没有关于query和queryAll的支持信息。

更多信息

有关querySelector 和querySelectorAll 的使用和浏览器支持的更多信息，另请参阅this answer。

Answer 2

query() 和 queryAll() 接受相对选择器字符串，而 querySelector() 和 querySelectorAll() 不接受。相对选择器基本上是一个选择器，它可能是部分的并以组合器开头：

var parentNode = document.getElementById('parentNode'); // document.querySelector('#parentNode');

// Find .childNode elements that are direct descendants (children) of parentNode
// This cannot be done with querySelectorAll() using the existing reference to parentNode
parentNode.queryAll('> .childNode');
// querySelectorAll does allow getting all descendants of parentNode though
parentNode.querySelectorAll('.childNode');

但更重要的是，queryAll() 返回一个 live Elements[] 数组，而 querySelectorAll() 返回的 NodeList 是静态的，这意味着该列表中的节点在更改时不会更新制作它们各自的 DOM 元素。

就它们的功能而言，query() 和 queryAll() 可能更类似于在 Selectors API level 2 中定义的 find() 和 findAll() — 您还可以在其中找到相对选择器的定义 — 因为两者方法组接受并使用相对选择器。请注意，findAll() 也返回一个静态的NodeList，因此它们仍然不完全相同。