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を用いて文字列を挿入する。

その他

  • connect(methodName, objOrFunc, funcName) : 絞り込んだ要素全てに、dojo.connect()でイベントハンドラを接続する