queryAll和querySelectorAll有什么区别？ [英] What's the difference between queryAll and querySelectorAll

问题描述

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

The definitions from the DOM Standard seems almost exactly the same, and I don't understand the difference.

queryAll 和 querySelectorAll之间有什么区别？ 。

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

The evaluation logic from DOM standard is below, but I am not smart enough to understand it.

查询& queryAll

query & queryAll

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

To match a relative selectors string relativeSelectors against a set, run these steps:

让我们从相对选择器解析相对选择器的结果。 [SELECTORS]

Let s be the result of parse a relative selector from relativeSelectors against set. [SELECTORS]

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

If s is failure, throw a JavaScript TypeError.

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

Return the result of evaluate a selector s using :scope elements set. [SELECTORS]

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

The query(relativeSelectors) method must return the first result of running match a relative selectors string relativeSelectors against a set consisting of context object, and null if the result is an empty list.

queryAll（relativeSelectors）方法必须返回一个元素数组，其初始化为运行的结果，一个相对选择符字符串relativeSelectors与由上下文对象组成的集合。

The queryAll(relativeSelectors) method must return an Elements array initialized with the result of running match a relative selectors string relativeSelectors against a set consisting of context object.

querySelector & querySelectorAll

querySelector & querySelectorAll

将选择符字符串选择器与节点，运行以下步骤：

To scope-match a selectors string selectors against a node, run these steps:

让我们来解析选择器选择器。 [SELECTORS]

Let s be the result of parse a selector selectors. [SELECTORS]

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

If s is failure, throw a JavaScript TypeError.

返回评估选择器的结果针对节点的根使用范围根节点和范围过滤的范围限制方法。 [SELECTORS]。

Return the result of evaluate a selector s against node's root using scoping root node and scoping method scope-filtered. [SELECTORS].

querySelector（selectors）方法必须返回运行作用域的第一个结果 - 匹配上下文对象的选择符字符串选择器，如果结果为

The querySelector(selectors) method must return the first result of running scope-match a selectors string selectors against the context object, and null if the result is an empty list otherwise.

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

The querySelectorAll(selectors) method must return the static result of running scope-match a selectors string selectors against the context object.

推荐答案

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

query() and queryAll() accept a relative selector string, whereas querySelector() and querySelectorAll() do not. A relative selector is basically a selector which may be partial and start with a combinator:

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元素进行更改时，该列表中的节点不会更新。

But more importantly, queryAll() returns a live Elements[] array whereas the NodeList returned by querySelectorAll() is static, which means the nodes in that list are not updated when changes are made to their respective DOM elements.

的功能， query（）和 queryAll（）可能更类似于 find ）和 findAll（），定义在选择器API第2级 - 您还可以在其中找到相对选择器的定义，因为两个方法组都接受并使用相对选择器。请注意， findAll（）还返回一个静态 NodeList ，所以它们仍然不完全相同。

In terms of their functionality, query() and queryAll() may be more analogous to find() and findAll(), defined in Selectors API level 2 — where you'll also find the definition of a relative selector — as both method groups accept and work with relative selectors. Note that findAll() also returns a static NodeList, so they are still not completely identical.

这篇关于queryAll和querySelectorAll有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！