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
thank you nescafe, we were able to stand still.
