Returns nodes which match the given CSS3 selector, searching the entire document by default but optionally taking a node to scope the search by. Returns an array.
dojo.query() is the swiss army knife of DOM node manipulation in Dojo. Much like Prototype's "$$" (bling-bling) function or JQuery's "$" function, dojo.query provides robust, high-performance CSS-based node selector support with the option of scoping searches to a particular sub-tree of a document.
acme supports a rich set of CSS3 selectors, including:
.foo)span descendant selectors> child element selectors#foo style ID selectors* universal selector~, the preceded-by sibling selector+, the immediately preceded-by sibling selector[foo] attribute presence selector[foo='bar'] attribute value exact match[foo~='bar'] attribute value list item match[foo^='bar'] attribute start match[foo$='bar'] attribute end match[foo*='bar'] attribute substring match:first-child, :last-child, and :only-child positional selectors:empty content emtpy selector:checked pseudo selector:nth-child(n), :nth-child(2n+1) style positional calculations:nth-child(even), :nth-child(odd) positional selectors:not(...) negation pseudo selectorsAny legal combination of these selectors will work with
dojo.query(), including compound selectors ("," delimited).
Very complex and useful searches can be constructed with this
palette of selectors and when combined with functions for
manipulation presented by dojo/NodeList, many types of DOM
manipulation operations become very straightforward.
While dojo.query handles many CSS3 selectors, some fall outside of what's reasonable for a programmatic node querying engine to handle. Currently unsupported selectors include:
:: pseduo-element selectors:root, :lang(), :target, :focus:root, :active, :hover, :visited, :link,`:enabled`, `:disabled`
:*-of-type pseudo selectorsdojo.query (as of dojo 1.2) supports searching XML documents
in a case-sensitive manner. If an HTML document is served with
a doctype that forces case-sensitivity (e.g., XHTML 1.1
Strict), dojo.query() will detect this and "do the right
thing". Case sensitivity is dependent upon the document being
searched and not the query used. It is therefore possible to
use case-sensitive queries on strict sub-documents (iframes,
etc.) or XML documents while still assuming case-insensitivity
for a host/root document.
If something other than a String is passed for the query,
dojo.query will return a new dojo/NodeList instance
constructed from that parameter alone and all further
processing will stop. This means that if you have a reference
to a node or NodeList, you can quickly construct a new NodeList
from the original by calling dojo.query(node) or
dojo.query(list).
| Parameter | Type | Description |
|---|---|---|
| query | String | The CSS3 expression to match against. For details on the syntax of CSS3 selectors, see http://www.w3.org/TR/css3-selectors/#selectors |
| root | String | DOMNode |
Optional A DOMNode (or node id) to scope the search from. Optional. |
See the dojo/selector/acme reference documentation for more information.
search the entire document for elements with the class "foo":
require(["dojo/query"], function(query) {
query(".foo").forEach(function(q) { console.log(q); });
});
these elements will match:
<span class="foo"></span> <span class="foo bar"></span> <p class="thud foo"></p>
search the entire document for elements with the classes "foo" and "bar":
require(["dojo/query"], function(query) {
query(".foo.bar").forEach(function(q) { console.log(q); });
});
function for filtering a NodeList based on a selector, optimized for simple selectors
| Parameter | Type | Description |
|---|---|---|
| nodeList | Node[] | |
| filter | String | |
| root | String | DOMNode |
Optional
|