What's the difference between queryAll and querySelectorAll

Question

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

What is the difference between queryAll and querySelectorAll.

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

query & queryAll

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

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

If s is failure, throw a JavaScript TypeError.

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

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.

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

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

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

If s is failure, throw a JavaScript TypeError.

Return the result of evaluate a selector s against node's root using scoping root node and scoping method scope-filtered. [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.

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

Answer 1

2016 Update

queryAll was removed from the DOM spec

Currently the most important difference between queryAll and querySelectorAll is that queryAll (as well as query) was removed from the DOM specification.

The current version of the DOM specification is available at:

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

Note: https://www.w3.org/TR/dom/ is an outdated fork of the DOM Standard (see Fork tracking on the WHATWG Wiki and the comment by Domenic for more info).

Last mention

The last version that included query and queryAll was published on 15 March 2016:

• http://web.archive.org/web/20160315085447/https://dom.spec.whatwg.org/
  • See sections 4.2.3. Interface ParentNode and 4.2.6. Collections: Elements

Removal

The next version doesn't mention query or queryAll anywhere:

• http://web.archive.org/web/20160329233515/https://dom.spec.whatwg.org/
  • See section 4.2.6. Mixin ParentNode

Current specification

All occurances of query or queryAll in the DOM standard were commented out by Anne van Kesteren on March 29, 2016.

The current DOM specification (as of July 2016) doesn't mention query or queryAll at all:

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

querySelector and querySelectorAll are in section 4.2.6 Mixin ParentNode.

It seems that currently the only reliable API is querySelector and querySelectorAll (see this answer for more details) and according to this discussion on GitHub query and queryAll will not be available until the JavaScript subclassing of built-ins is implemented in the browsers and even then it will be unlikely to return a live Elements[] array as described in the answer by BoltClock.

Browser support

As of June 2016 there is no mention of query and queryAll on MDN:

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

On the other hand querySelector and querySelectorAll are well documented and widely supported:

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

Browser support of querySelector/querySelectorAll according to Can I use as of June 2016:

(See: http://caniuse.com/queryselector for up to date info)

There is no info available on the support of query and queryAll.

More info

See also this answer for more info on the usage and browser support of querySelector and querySelectorAll.

Answer 2

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');

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.

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.