dojo.query (returns dojo.NodeList)
dojo.require(“dojo._base.query”);

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.
Supported Selectors:

dojo.query() supports a rich set of CSS3 selectors, including:

• class selectors (e.g., .foo)
• node type selectors like span
• descendant selectors
• > child element selectors
• #foo style ID selectors
• * universal selector
• ~, the immediately preceeded-by sibling selector
• +, the preceeded-by sibling selector
• attribute queries:
  • [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 selectors

Usage
var foo: dojo.NodeList=dojo.query(query: String, root: String|DOMNode?, listCtor: Function?);

parameter	type	description
query	String	The CSS3 expression to match against. For details on the syntax of CSS3 selectors, see
root	String|DOMNode Optional.	A DOMNode (or node id) to scope the search from. Optional.
listCtor	Function	Optional.

Example 1

search the entire document for elements with the class “foo”:

dojo.query(“.foo”);

these elements will match:

Example 2

search the entire document for elements with the classes “foo” and “bar”:

dojo.query(“.foo.bar”);

these elements will match:

while these will not:

Example 3

find elements which are descendants of paragraphs and which have a “highlighted” class:

dojo.query(“p span.highlighted”);

the innermost span in this fragment matches:

…
…

Example 4

set an “odd” class on all odd table rows inside of the table #tabular_data, using the > (direct child) selector to avoid affecting any nested tables:

dojo.query(“#tabular_data > tbody > tr:nth-child(odd)”).addClass(“odd”);

Example 5

remove all elements with the class “error” from the document and store them in a list:

var errors = dojo.query(“.error”).orphan();

Example 6

add an onclick handler to every submit button in the document which causes the form to be sent via Ajax instead:

dojo.query(“input[type='submit']“).onclick(function(e){
dojo.stopEvent(e); // prevent sending the form
var btn = e.target;
dojo.xhrPost({
form: btn.form,
load: function(data){
// replace the form with the response
var div = dojo.doc.createElement(“div”);
dojo.place(div, btn.form, “after”);
div.innerHTML = data;
dojo.style(btn.form, “display”, “none”);
}
});
});

Example 7

Find every element in the page with the class “blueButton” assigned
dojo.addOnLoad(function(){
dojo.query(“.blueButton”).forEach(function(node, index, arr){
console.debug(node.innerHTML);
});
});

Simple Queries

// all h3 elements
dojo.query(‘h3′)
// all h3 elements which are first-child of their parent node
dojo.query(‘h3:first-child’)
// a node with id=”main”
dojo.query(‘#main’)
// all h3 elements within a node with id=”main”
dojo.query(‘#main h3′)
// a ‘div’ with an id=”main”
dojo.query(‘div#main’)
// all h3 elements within a div with id=”main”
dojo.query(‘div#main h3′)
// all h3 elements that are immediate children of a ‘div’, within node with id=”main”
dojo.query(‘#main div > h3′)
// all nodes with class=”foo”
dojo.query(‘.foo’)
// all nodes with classes “foo” and “bar”
dojo.query(‘.foo.bar’)
// all h3 elements that are immediate children of a node with id=”main”
dojo.query(‘#main > h3′)

Immediate Child Elements

dojo.query(‘#main > *’)
dojo.query(‘#main >’)
dojo.query(‘.foo >’)
dojo.query(‘.foo > *’)

Queries rooted at a given element

dojo.query(‘> *’, dojo.byId(‘container’))
dojo.query(‘> h3′, ‘main’)

Compound queries
Combining 2 or more selectors to produce one resultset

dojo.query(‘.foo, .bar’)

Multiple class attribute values

dojo.query(‘.foo.bar’)

Using attribute selectors

Picking out elements with particular attributes/values

dojo.query(‘[foo]‘)
dojo.query(‘[foo$=\"thud\"]‘)
dojo.query(‘[foo$=thud]‘)
dojo.query(‘[foo$=\"thudish\"]‘)
dojo.query(‘#main [foo$=thud]‘)
dojo.query(‘#main [ title $= thud ]‘)
dojo.query(‘#main span[ title $= thud ]‘)
dojo.query(‘[foo|=\"bar\"]‘)
dojo.query(‘[foo|=\"bar-baz\"]‘)
dojo.query(‘[foo|=\"baz\"]‘)
dojo.query(‘.foo:nth-child(2)’)

Descendant selectors

dojo.query(‘>’, ‘container’)
dojo.query(‘> *’, ‘container’)
dojo.query(‘> [qux]‘, ‘container’)

Sibling selectors

dojo.query(‘.foo + span’)
dojo.query(‘.foo ~ span’)
dojo.query(‘#foo ~ *’)
dojo.query(‘#foo ~’)

Sub-selectors, using not()

dojo.query(‘#main span.foo:not(span:first-child)’)
dojo.query(‘#main span.foo:not(:first-child)’)

Nth-child

dojo.query(‘#main > h3:nth-child(odd)’)
dojo.query(‘#main h3:nth-child(odd)’)
dojo.query(‘#main h3:nth-child(2n+1)’)
dojo.query(‘#main h3:nth-child(even)’)
dojo.query(‘#main h3:nth-child(2n)’)
dojo.query(‘#main h3:nth-child(2n+3)’)
dojo.query(‘#main > *:nth-child(2n-5)’)

Using pseudo-selectors

dojo.query(‘#main2 > :checked’)
dojo.query(‘#main2 > input[type=checkbox]:checked’)
dojo.query(‘#main2 > input[type=radio]:checked’)

Count of checked checkboxes in a form with id myForm
dojo.query(‘input:checked’, ‘myForm’).length