16

DOM 标准中的定义似乎几乎完全相同，我不明白其中的区别。

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) 方法必须返回针对上下文对象运行范围匹配选择器字符串选择器的静态结果。

4

2 回答 2

19

2016 更新

queryAll已从 DOM 规范中删除

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

DOM 规范的当前版本可在以下位置获得：

注意：https ://www.w3.org/TR/dom/是 DOM 标准的一个过时的分支（有关更多信息，请参阅WHATWG Wiki上的分支跟踪和Domenic 的评论）。

最后提及

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

移动

下一个版本没有提及query或queryAll任何地方：

当前规格

2016 年 3 月 29 日，Anne van Kesterenquery注释掉了queryAll DOM 标准中出现的所有内容。

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

querySelector并querySelectorAll在第 4.2.6 节 Mixin ParentNode中。

似乎目前唯一可靠的 API 是querySelectorand querySelectorAll （有关更多详细信息，请参阅此答案），并且根据GitHub上的讨论， 在浏览器中实现内置的 JavaScript 子类之前将不可用，即使那样也不太可能返回一个活动 Elements[] 数组，如BoltClock 的答案中所述。queryqueryAll

浏览器支持

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

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

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

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

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

更多信息

有关 和 的使用和浏览器支持的更多信息，另请参阅此答案。querySelectorquerySelectorAll

于 2016-07-07T12:35:15.063 回答
10

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()返回一个活动 Elements[]数组，而NodeList返回的querySelectorAll()是静态的，这意味着当对各自的 DOM 元素进行更改时，该列表中的节点不会更新。

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

于 2014-04-24T13:14:03.440 回答