Ext.DomQuery

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

// 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

// 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

// 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