要素を取得する2つの関数を紹介しました。しかし、これらの関数の機能は実はこれだけではありません。これらの関数は取得した要素に便利なメソッド群を追加して返してくれるのです。つまり、この関数で取得した要素はメソッドが拡張されたPrototype.js仕様の要素になっているのです。
例えば、要素にイベントハンドラを登録する場合を考えてみましょう。通常のJavaScriptの場合は、リスト21のように書きます。ブラウザー判別をして、ブラウザーごとのイベント登録方法でイベントを登録しなければならないのです。
リスト21：要素にイベントハンドラを登録（$$関数を使わない場合）
<div>hoge</div>
<div>hoge</div>
<div>hoge</div>
<script type="text/javascript">
var elements = document.getElementsByTagName('div');
var eventHandler = function() {
alert(' 要素がクリックされました');
};
for (var i = 0; i < elements.length; i ++) {
if (navigator.appVersion.match(/\bMSIE\b/)) { // IE の場合の処理
elements[i].attachEvent('onclick', eventHandler);
}
else {
elements[i].addEventListener('click', eventHandler, false);
}
}
</script>
しかし、これではコードが非常に繁雑になってしまいます。なんとかならないのでしょうか。そこで、先ほどのメソッドの拡張です。$$関数や$関数を用いて要素を取得した場合はリスト22のように書くことができるのです。
リスト22：要素にイベントハンドラを登録（$$関数を使った場合）
<div>hoge</div>
<div>hoge</div>
<div>hoge</div>
<script type="text/javascript">
var elements = $$('div');
var eventHandler = function() {
alert(' 要素がクリックされました');
};
for (var i = 0; i < elements.length; i ++) {
elements[i].observe('click', eventHandler);
}
</script>
かなりシンプルになったと思いませんか。
このようなことができるのは、$$関数によって要素に新しいメソッドobserveが追加されたからなのです。このように、$関数や$$関数は要素を取得した後のことまでしっかりと考えてくれるのです。
|
