詳解! Dojo Toolkit 1.0 (基礎知識編) - 頻出APIと便利機能を一気におさえる

dojo.query()の使用法

dojo.query()は、Dojoの0.9から導入されたパワフルなAPIだ。ドキュメント内の要素をCSS3のセレクタを用いて絞り込み、それらに対して一括処理を行うことができる。JQueryの$関数、Prototype.jsの$$関数と同様のものだと考えてよいだろう。

dojo.query()は、CSS3のセレクタを表す文字列を引数に取り、NodeListというクラスのインスタンスを返す。NodeListの詳細は後述するが、選択された要素が格納された配列だと思ってよい。

dojo.query()の使用例は以下のようになる。

 // input要素を全て取得する
 var nodes = dojo.query("input");

 // input要素の中から、type属性がtextの物だけを抽出する
 var nodes = dojo.query("input[type='text']");

 // ID「title」が指定された要素を取得
 var nodes = dojo.query("#title");

 // クラス「para」が指定されたdiv要素を全て処理
 dojo.query("div.para").forEach(function(elem) {
   …
 });

 // ボタン要素全てに、クリック時のイベントハンドラを設定
 dojo.query("input[type='button']").connect("onclick", function() {
   …
 });

 // クラス「para」が指定された要素全てにスタイルを指定
 dojo.query(".para").style("border", "1px solid gray");

 // DIV要素の偶数番目の子要素全てにクラスを追加する
 dojo.query("div:nth-child(2n)").addClass("highlight");

dojo.query()は全てのCSS3セレクタをサポートしているわけではない。サポートされていないセレクタは以下の通り。

名前空間
"~"や"+"といった、兄弟要素を指すセレクタ
"::"や"*-of-type"で指定される疑似要素セレクタ
以下に示す疑似セレクタや状態依存セレクタ
:root, :lang(), :target, :focus,
:active, :hover, :visisted, :link,
:enabled, :disabled, :checked

NodeListクラスが持つメソッド

dojo.query()の戻り値であるNodeListクラスは、上の使用例でも示した通り、配列をベースとして様々なメソッドが追加されている。現在のところ利用できるメソッドには以下のようなものがある。

配列関連のメソッド

slice(begin, end) : Array.slice()と同様
splice(index, howmany, item) : Array.splice()と同様
concat(items): Array.concat()と同様
indexOf(value, fromIndex) : dojo.indexOf()と同様
lastIndexOf(value, fromIndex) : dojo.lastIndexOf()と同様
every(callback,thisObject) : dojo.every()と同様
some(callback, thisObject) : dojo.some()と同様
map(func, obj) : dojo.map()と同様
forEach(callback, thisObj) : dojo.forEach()と同様
filter(simpleQuery) : 関数、もしくはクエリ文字列を指定して、さらに絞り込んだ要素を取得する

CSS/DOM関連のメソッド

style(property, value) : dojo.style()と同様
addClass(className) : dojo.addClass()と同様
removeClass(className) : dojo.removeClass()と同様
place(queryOrNode, position) : 指定した要素、もしくはクエリで抽出した要素のうち最初の要素を、positionで指定された位置に挿入する
adopt(queryOrListOrNode, position) : 指定した要素、もしくはクエリで抽出した要素を全て、positionで指定された位置に挿入する
orphan(simpleFilter) : filterと同様に絞り込んだ要素をすべて削除する
addContent: function(content, position) : 全ての要素の内側に、innerHTMLを用いて文字列を挿入する。