Query Overview

Query provides CSS DOM element selection. CSS DOM selection lets you select HTML elements by providing a CSS selector that matches those elements.

CSS selectors

Hopefully, you are familiar with CSS, if not you can find a quick introduction here. Here are a few CSS selector examples:

p -> selects all P elements in the page

.snippet -> selects all elements with class='snippet'

#header -> selects the element with id='header'

#header .snippet p -> selects only P elements inside elements with
                      class='snippet' inside the element with id='header'

Using Query, you can retrieve an array of elements using the same selectors.

Examples

//Returns all A elements inside elements with class='todo'
Query('.todo a') -> [HTMLElements ... ]

//returns all images inside the element with id='header'
Query.descendant( $E('header'), 'img')

Use

Don't uses this for attaching event handlers! The Controller object is much better suited to this. But, for other purposes, the Query API provides a detailed list of which css selectors work. If you are using prototype or jQuery, their css selector functionality replaces and is mapped to Query.

Install

Simply include the query plugin.

include.plugins('query')