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.