Javascript 什么';queryAll和querySelectorAll的区别是什么

Javascript 什么';queryAll和querySelectorAll的区别是什么,javascript,dom,selectors-api,Javascript,Dom,Selectors Api,两者看起来几乎完全相同,我不理解其中的区别 queryAll和queryselectoral之间有什么区别 DOM标准的评估逻辑如下,但我不够聪明,无法理解它 查询&查询 要将相对选择器字符串相对选择器与集合匹配,请运行以下步骤: 让我们根据集合解析relativeSelectors中的相对选择器。[选择器] 如果s失败,抛出一个JavaScript类型错误 返回使用:scope elements set评估选择器的结果。[选择器] 查询(relativeSelectors)方法必须返回对由上下

两者看起来几乎完全相同,我不理解其中的区别

queryAll
queryselectoral
之间有什么区别

DOM标准的评估逻辑如下,但我不够聪明,无法理解它

查询
&
查询

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

让我们根据集合解析relativeSelectors中的相对选择器。[选择器]

如果s失败,抛出一个JavaScript类型错误

返回使用:scope elements set评估选择器的结果。[选择器]

查询(relativeSelectors)方法必须返回对由上下文对象组成的集合运行match a relative selectors string relativeSelectors的第一个结果,如果结果为空列表,则返回null

queryAll(relativeSelectors)方法必须返回一个元素数组,该数组使用对由上下文对象组成的集合运行match a relative selectors string relativeSelectors的结果初始化

查询选择器
&
查询选择器所有

要根据节点匹配选择器字符串选择器的作用域,请运行以下步骤:

让我们分析一个选择器的结果。[选择器]

如果s失败,抛出一个JavaScript类型错误

返回使用作用域根节点和作用域方法作用域筛选针对节点的根计算选择器的结果。[选择器]

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

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

query()。相对选择器基本上是一个选择器,它可以是部分的,并从一个组合器开始:

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

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

2016更新
queryAll
已从DOM规范中删除 目前,
queryAll
querySelectorAll
之间最重要的区别是,
queryAll
(以及
query
)已从DOM规范中删除

DOM规范的当前版本可从以下站点获得:

注意:是DOM标准的过时分支 (有关更多信息,请参见和上的)

最后提及 包含
query
queryAll
的最新版本于2016年3月15日发布:

    • 见第节 和
移除 下一个版本没有在任何地方提到
query
queryAll

    • 见第节
现行规格
query
queryAll
安妮·范·凯斯特伦于2016年3月29日发布的DOM标准

当前的DOM规范(截至2016年7月)根本没有提到
query
queryal

querySelector
queryselectoral
在节中

目前唯一可靠的API似乎是
querySelector
querySelectorAll
(有关更多详细信息,请参见)并且根据
query
queryal
的规定,只有在浏览器中实现了内置的JavaScript子类化后,才会提供,即使如此,也不太可能返回如中所述的活动元素[]数组

浏览器支持 截至2016年6月,MDN上未提及
query
queryal

另一方面,
querySelector
queryselectoral
都有很好的文档记录和广泛的支持:

截至2016年6月,对
查询选择器
/
查询选择器所有
的浏览器支持:

(有关最新信息,请参阅)

关于
query
queryal
的支持,没有可用的信息

更多信息
有关
querySelector
queryselectoral
的用法和浏览器支持的更多信息,请参见。添加每个函数返回的内容也很重要。一个返回包含活动节点的
元素
数组,另一个返回静态
节点列表
@OozeMeister:Good point。这也是
queryAll()
不同于
findAll()
的原因。我会修改我的答案。谢谢你的解释。请注意,
query()
&
queryAll()
的当前polyfill不支持相对选择器更新:现在支持相对选择器@努克斯:不,不是。这样做的目的是匹配.childNode元素,其父元素恰好与parentNode引用具有相同的标记名,这并不意味着它们是parentNode的子元素。例如,如果parentNode是一个div及其.childNode子代i