queryAll和querySelectorAll之间有什么区别

Question

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

queryAll和querySelectorAll之间有什么区别。

DOM标准的评估逻辑如下，但我不够聪明，不能理解它。

query＆amp; queryAll

  

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

     

设s是从relativeSelectors解析set的相对选择器的结果。 [SELECTORS]

     

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

     

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

     

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

     

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

querySelector＆amp; querySelectorAll

  

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

     

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

     

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

     

使用作用域根节点和范围筛选的作用域方法，返回评估选择器s对节点根的结果。 [SELECTORS]。

     

querySelector（selectors）方法必须返回运行scope-match的第一个结果，选择器字符串选择器与上下文对象匹配，如果结果是空列表，则返回null。

     

querySelectorAll（selectors）方法必须针对上下文对象返回运行scope-match选择器字符串选择器的静态结果。

Answer 1

2016年更新

queryAll已从DOM规范

中删除

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

DOM规范的当前版本位于：

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

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

最后提及

包含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的所有出现 在2016年3月29日由Anne van Kesteren撰写的DOM标准were commented out中。

当前的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子类化之前将无法使用它不太可能返回the answer by BoltClock中描述的实时Elements []数组。

浏览器支持

截至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

截至2016年6月，

根据Can I use对querySelector / querySelectorAll的浏览器支持：

（参见：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[]数组，而NodeList返回的querySelectorAll()是静态的，这意味着当对其各自的DOM元素进行更改时，该列表不会更新。

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