What is DomQuery?

DomQuery provides high performance selector/xpath processing. It works on HTML and XML documents (if a content node is passed in). DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath. A list of the full CSS3 selector spec can be found here.

Multiple Selections

You can select multiple sets of at elements with different criteria into a single result set.

// Matches all divs with class foo and all spans with class bar
Ext.select('div.foo, span.bar');

Selection Root

When using a selector, it is possible to specify an optional root node, if it is not specified it will default to the document body. This can be useful to increase performance, since specifying a root means there will be possibly less nodes to check.

Ext.get('myEl').select('div.foo');// These are equivalent
Ext.select('div.foo', true, 'myEl');// These are equivalent

Selection Chaining

Selectors can be chained to match multiple criteria, which is useful if you need to execute a complex query. Chained attributes are processed in order

// Matches a div with a class of foo, that has a title attribute bar, that is
// the first child of its immediate parent.
Ext.select('div.foo[title=bar]:first');

Element selectors

* any element
E an element with the tag E
E F All descendent elements of E that have the tag F
E > F or E/F all direct children elements of E that have the tag F
E + F all elements with the tag F that are immediately preceded by an element with the tag E
E ~ F all elements with the tag F that are preceded by a sibling element with the tag E

// Matches all div elements
Ext.select('div'); 
// Matches all span elements contained inside a div at any level
Ext.select('div span');
// Matches all li elements with a ul as their immediate parent
Ext.select('ul > li');

Attribute selectors

E.foo has a class "foo"
E[foo] has an attribute "foo"
E[foo=bar] has an attribute "foo" that equals "bar"
E[foo^=bar] has an attribute "foo" that starts with "bar"
E[foo$=bar] has an attribute "foo" that ends with "bar"
E[foo*=bar] has an attribute "foo" that contains the substring "bar"
E[foo%=2] has an attribute "foo" that is evenly divisible by 2
E[foo!=bar] has an attribute "foo" that does not equal "bar"

// Matches all div elements with the class news
Ext.select('div.news'); 
// Matches all a elements with an href that is http://extjs.com
Ext.select('a[href=http://extjs.com]'); 
// Matches all img elements that have an alt tag
Ext.select('img[alt]');

Pseudo selectors

E:first-child E is the first child of its parent
E:last-child E is the last child of its parent
E:nth-child(n) E is the nth child of its parent (1 based as per the spec)
E:nth-child(odd) E is an odd child of its parent
E:nth-child(even) E is an even child of its parent
E:only-child E is the only child of its parent
E:checked E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)
E:first the first E in the resultset
E:last the last E in the resultset
E:nth(n) the nth E in the resultset (1 based)
E:odd shortcut for :nth-child(odd)
E:even shortcut for :nth-child(even)
E:contains(foo) E's innerHTML contains the substring "foo"
E:nodeValue(foo) E contains a textNode with a nodeValue that equals "foo"
E:not(S) an E element that does not match simple selector S
E:has(S) an E element that has a descendent that matches simple selector S
E:next(S) an E element whose next sibling matches simple selector S
E:prev(S) an E element whose previous sibling matches simple selector S

// Matches the first div with a class of code
Ext.select('div.code:first'); 
// Matches spans that fall on an even index.
Ext.select('span:even'); 
// Matches all divs whos next sibling is a span with class header.
Ext.select('div:next(span.header));

CSS value selectors

E{display=none} css value "display" that equals "none"
E{display^=none} css value "display" that starts with "none"
E{display$=none} css value "display" that ends with "none"
E{display*=none} css value "display" that contains the substring "none"
E{display%=2} css value "display" that is evenly divisible by 2
E{display!=none} css value "display" that does not equal "none"

Ext.DomQuery