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.
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');
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
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');
// 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');
// 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]');
// 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));