Ext.DomQueryの基本的な使い方#1
ExtJSのDOMセレクタはExt.query()というメソッドで使えるようになっています。Ext.query()メソッドは2つのパラメータを持ち、第1パラメータに取得したい場所を書式に基づいた文字列で与えて、第2パラメータにエレメントのidを渡します。第2パラメータは省略可能ですのでこれを使わずとも、第1パラメータだけでかなり柔軟な取得ができます。また、Ext.query()メソッドはExt.DomQuery.select()のエイリアス(shorthand)ですので、どちらを使ってもいいようです。動作サンプル
DomQueryで探索するサンプルHTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="fuga" class="piyo">
ここはdiv#fuga.piyoです。
<span class="fuga">
ここはspan.fugaです。div#fuga.piyoの中に配置されています。
</span>
<a href="#" class="piyo">
ここはa.piyoです。span.fugaと同じ高さで、その直後に配置されています
</a>
</div>
<div id="piyo" class="fuga">
ここはdiv#piyo.fugaです。
<a href="#">
ここはaです。div#piyo.fuga直下に配置されています。
</a>
<p>
ここはpです。div#piyo.fugaの中に配置されています。
<a href="#">
ここはaです。div#piyo.fuga内ですがその直下にはありません。
</a>
<a href="#">
ここはaです。div#piyo.fuga内ですがその直下にはありません。
</a>
</p>
<span class="fuga">
ここはspan.fugaです。div#piyo.fugaの中に配置されています。
</span>
<p class="piyo">
ここはp.piyoです。span.fugaと同じ高さでその直後に配置されています
</p>
</div>
<p class="piyo">
ここはp.piyoです。div#piyo.fugaと同じ高さでその直後に配置されています
</p>
</body>
</html>
Elementセレクタ
Element(要素)とは？を先に説明しておきますと<a href="#" >リンク</a>このタグ開始～タグ終了セットをElementと呼んでいます。よくタグとエレメントがごっちゃになったりしますが、タグは開始タグも終了タグもタグですので、エレメントより分解された言い方ですね。『タグと要素（エレメント）の違いを説明して』がわかりやすいです。
で、ちょっと余談ですが、じゃあエレメントとノードの違いって何よ？って疑問があって、C#でパタパタ実装しているとXmlElementとXmlNodeなんてのを使うことになるんですが、XmlElementとXmlNodeというクラスの扱いだけで言うと、「りんご:XmlElement」と「フルーツ:XmlNode」くらいに覚えておけばいいみたいです。XmlNodeのほうが抽象化されてるってか一般化されてるって言うかそういう風に腹に落としました。ふーん。
で、javascriptのgetElementByIdだとエレメントが返るぞと言われてる気がするのですが、selectSingleNodeっていわれるとノードだと言われる。後者はXPathで指定するので手続きは違うとして、返って来たモノはなんだろね。呼び方の違い？まぁタイプセーフではないのでごちゃごちゃいわないことにします。（余談なげー）
ということでElementセレクタの説明です。
Ext.query( "span" ); // [ span.fuga, span.fuga ]
このクエリは[ span.fuga, span.fuga ]という２つの要素からなる配列を返します。全ドキュメントからspanエレメントに合致するものを拾ってきます。
Ext.query( "span", "fuga" ); // [ span.fuga ]
このクエリは[ span.fuga ]という1つの要素からなる配列を返します。サンプルHTMLにはspanエレメントが2つありますが、idが"fuga"からなるdiv内のspanを指定していますので、前者のほうが返ります。次は書式付の第1パラメータで取得する方法です。
id指定:"#"
idを指定してエレメントを拾いたい場合は、"#"をプレフィックスとして与えてあげます。
Ext.query( "#piyo" ); // [ div#piyo.fuga ]
このクエリは、idが"piyo"でclassが"fuga"のdivが返ります。2つあるdivのうち後者のほうが返ります。class指定:"."
classを指定してエレメントを拾いたい場合は、"."をプレフィックスとして与えてあげます。
Ext.query( ".piyo" ); // [ div#fuga.piyo, a.piyo, p.piyo, p.piyo ]
このクエリは、classが"piyo"のエレメントを返します。
全指定:"*"
全ての要素を拾いたい場合は"*"を指定することで拾えます。
Ext.query( "*" ); // [ html, head, meta, body, div#fuga.piyo, span.fuga, a.piyo, div#piyo.fuga, a, p, a, a, span.fuga, p.piyo, p.piyo ]
子エレメント指定:" "(スペース)
あるエレメント内で指定した全ての子エレメントを拾う場合は、" "（スペース）を間にはさんで与えてあげます。
Ext.query( "div p" ); // [ p, p.piyo ]
このクエリは親にdivエレメントを持つ p を返します。
Ext.query( "div span" ); // [ span.fuga, span.fuga ]
このクエリは親にdivエレメントを持つspanエレメントを返すので、２つのspanが返ります。
直下の子エレメント指定:">"または"/"
あるエレメント内の直下の子エレメントを指定して拾う場合は">"または"/"を間にはさんで与えてあげます。
Ext.query( "div/a" ); // [ a.piyo, a ]
div#fuga.piyo直下のa.piyoエレメントとdiv#piyo.fuga直下のaエレメントを返します。pエレメント内の２つのaエレメントは直下にないので返しません。
直後の同じ高さ(兄弟要素)のエレメント指定:"+"
あるエレメントと同じ高さにいるエレメントで、その直後にいるエレメントを拾う場合は"+"を間にはさんで与えてあげます。一応挙動も確認したのですが（あまり使いそうにないなーと思いながら）、ちょっと自信ないです。
Ext.query( ".fuga+.piyo" ); // [ a.piyo, p.piyo, p.piyo ]
ちょっとわかりにくいですが、class="fuga"のエレメントと同じ高さにいて、その直後でclass="piyo"のエレメントを返しています。
後方の同じ高さ（兄弟要素）のエレメント指定:"+"
あるエレメントと同じ高さにいるエレメントで、その後方にいるエレメントを拾う場合は"~"を間にはさんで与えてあげます。
Ext.query( "a~span" ); // [ span.fuga ]
これもちょっとわかりにくいですが、aと同じ高さにいるspan.fugaを拾っています。"+"と違い、拾ってきたspan.fugaはaの直後にいません。これも一応挙動も確認したのですが、かなり自信ないです。ほかにもアトリビュートから指定してエレメントを取得したり出来るのですがまた次回に紹介します。
via : DomQueryのチュートリアル
via : APIDoc