Ext.DomQuery

DomQueryとは?

DomQueryクラスは、高速なセレクタ/XPath処理機能を提供します。DomQueryはHTMLだけでなく、XMLドキュメントも処理することが可能です(ドキュメント全体ではなく、ノードを引数として渡してあげる必要がありますが)。 DomQueryは、CSS3の仕様で定められているセレクタのほとんどを網羅しており、また、独自セレクタと基本的なXPathをサポートしています。 CSS3セレクタの仕様については、こちら(英語)をご覧ください。

複数条件選択

複数の選択条件を同時に指定して1つの結果にまとめてを取得することも可能です

// クラス名がfooであるdiv要素とクラス名がbarであるspan要素にマッチさせる
Ext.select('div.foo, span.bar');

選択の起点

セレクタを使う場合、検索するルート要素を指定することができます。ルート要素を指定しない場合は、bodyタグをルートとして検索が実行されます。ルート要素を指定することにより、チェックするノードを減らすことができるため、検索性能を向上させる手助けとなります。

Ext.get('myEl').select('div.foo');// 同じ意味
Ext.select('div.foo', true, 'myEl');// 同じ意味

選択の連結

複数の検索条件に一度にマッチできるようにセレクタは連結して指定することができます。この連結機能は複雑なクエリを実行する必要がある場合に便利です。連結されたセレクタは、順番に実行されていきます。

// クラス名fooを持ったdivでtitle属性にbarを持ったものをマッチさせます。さらに
// 1番目の子ノードのみを取得します。
Ext.select('div.foo[title=bar]:first');

要素(ノード)セレクタ

// すべてのdiv要素にマッチ
Ext.select('div'); 
// divの下にある全てのspan要素にマッチ
Ext.select('div span');
// 1つ上の親要素がul要素であるすべてのli要素にマッチ
Ext.select('ul > li'); 

属性セレクタ

// クラス名がnewsであるすべてのdiv要素にマッチ
Ext.select('div.news'); 
// href属性がhttp://extjs.comと一致するすべてのa要素にマッチ
Ext.select('a[href=http://extjs.com]'); 
// alt属性を持っているすべてのimg要素にマッチ
Ext.select('img[alt]'); 

疑似セレクタ

// クラス名にcodeを持つ1番目のdiv要素にマッチ
Ext.select('div.code:first'); 
// すべてのspan要素を取得した際に偶数番目に格納されたspan要素にマッチ
Ext.select('span:even'); 
// クラス名にheaderが指定されているspan要素が直後に隣接しているすべてのdiv要素にマッチ
Ext.select('div:next(span.header)); 

CSS値セレクタ