prototype.js の $$ 関数で CSS 風に DOM プログラミング

2007/07/15 11:56am

javascript
prototypejs

prototype.js の $$ 関数（実際の処理は Selector.findChildElements）は CSS セレクタを受け取り、セレクタにマッチする要素を配列で返してくれる。

var links = $$('#contents a');

だが、単純にひとつのセレクタだけではなくて、複数のセレクタを引数に渡したり、CSS と同じく、カンマ区切りで複数指定することもできる（結果は重複要素のない配列となって返ってくる）。

var links = $$("#contents a", "#footer .items a");

このコードは、こう書くこともできる。

var links = $$("#contents a, #footer .items a");

そして、いまさらながら気づいたのは、これらの特徴を利用すれば、DOM の処理を CSS のように宣言的に書くのが可能だ、ということ。

CSS 風に DOM プログラミング

たとえば、フォーム入力画面で最初のテキストフィールドまたはテキストエリアを取り出す場合は、

$$(
  "form input[type=text]",
  "form textarea"
).slice(0, 1)

と書けるので、以前の domready.js と組み合わせると、読み込み時に最初のテキストフィールドまたはテキストエリアを選択状態にするコードは以下のように書ける。

Event.domReady.add(function() {

  // Select initial first responder when the window is first placed onscreen.
  $$(
    "form input[type=text]",
    "form textarea"
  ).slice(0, 1).each(function(element){
    element.activate();
  });

});

強調部分のみに注目してもらうと分かりやすいが、CSS に近い記述になっている。また、今回の例のように、slice して特定の要素のみに限定したり、Prototype.js 1.5.1 では CSS3 もサポートされているなど、より柔軟な選択が可能なのも嬉しい。

prototype.js の $$ 関数で CSS 風に DOM プログラミング

CSS 風に DOM プログラミング

参考