TOP＞システム開発＞ DOMの拡張




まるごとJavaScript&Ajax!
JavaScriptを洗練させるPrototype.js

第６回：DOMの拡張（前編）
 著者：ガイアックス  天野 仁史   2007/3/12
1   2  次のページ
DOMの拡張

   Prototype.jsには、HTML要素（以下、単に要素）を取得するための2つの関数があります。それは、$関数と$$関数です。ここでは、この2つの関数を中心に話を進めていきます。
$関数

   $関数は、idから要素を取得する関数です。一般的にJavaScriptで要素を取得するには、document.getElementByIdを使います。このメソッドは非常によく使われるわりに名前が長いため、コードが繁雑になってしまう傾向があります。そこで、Prototype.jsでは$関数を使います。$関数によってコードは、非常にシンプルになります。

   例えば、ある要素の内容を書き換えるだけのコードならば、リスト19のように書くことができます。

リスト19：$関数でDOMの要素を書き換える
<div id="target"></div>
<script type="text/javascript">
var element = $('target');
element.innerHTML = ' 要素の内容';
</script>

   また、$関数は要素が指定されるとそのままその要素を返します。これを使うことによって、idでも要素でも同じ挙動をする関数を簡単に作ることができるのです。
$$関数

   $関数は非常に便利なのですが、たったひとつの要素しか取得できず、クラスや属性や名前から要素を取得することもできません。そこで、Prototype.jsには$$関数というものがあります。この関数はCSSのセレクタによって要素を指定するため、複雑な条件でも、複数の要素でも、取得できます。

   それでは、リスト20の例を見てください。

リスト20：$$関数ですべてのdiv要素を書き換える
<div class="target">
   <div></div>
   <div></div>
   <div></div>
</div>
<script type="text/javascript">
var elements = $$('div.target div');

for (var i = 0; i < elements.length; i ++) {
   elements[i].innerHTML = ' 要素の内容';
}
</script>

   この例では、class名がtargetなdiv要素に含まれるすべてのdiv要素の内容を書き換えています。そのくらいのコードならばこれだけシンプルに書けてしまいます。このような処理を$$関数を使わずに書こうとすると、きっと大変な処理になることでしょう。複雑な要素の取得をするときには$$関数が非常に心強い武器になるのです。
1   2  次のページ
書籍紹介
まるごとJavaScript&Ajax!

 まるごとJavaScript&Ajax! Vol.1 JavaScriptの一人者たちが教える最新ノウハウ
Ajaxの登場により、JavaScriptは最もホットなプログラミング言語になりました。そのJavaScriptとAjaxについて、最新ノウハウをまるごと解説します。
今や欠かせない、Prototype.jsをはじめとするJavaScriptライブラリを紹介します。IE 7やFirefox 2などの最新ブラウザーの新機能と、来るべきJavaScript 2についてもわかります。Web以外でのJavaScriptの利用テクニックも読めます。
JavaScriptを知り尽くした第一人者たちに学ぼう！

発売日：2007.02.16発売
定価：1,995円 (税込)
株式会社ガイアックス 天野 仁史
 著者プロフィール
株式会社ガイアックス   天野 仁史
渋谷で働くWebプログラマ。出身は石川県金沢市。21歳でプログラミングに出会い、IT戦士になることを決意。それからというもの、寝ても覚めてもプログラムを書き続け今に至る。はてなでamachangというidでブログを書いてます。

IT戦記
http://d.hatena.ne.jp/amachang/
この記事の評価をお聞かせください
 ボタンをクリックしますとウインドウが開きます。
 ご意見、ご要望にお応えします！ インプレスIT INSIDE
INDEX
第6回：DOMの拡張（前編）
DOMの拡張
  要素の拡張
JavaScriptを洗練させるPrototype.js
第1回 Prototype.jsを使う準備
第2回 JavaScriptの復習
第3回 Prototype.js流のオブジェクト指向を理解する
第4回 関数の拡張と配列操作メソッド一覧
第5回 代表的なメソッドの紹介
第6回 DOMの拡張（前編）
第7回 DOMの拡張（後編）

Think IT 過去人気記事

Think IT
注目おすすめ情報

Think IT人気ライター BEST 5

People
IT製品/サービス資料ダウンロード
    おすすめのホワイトペーパー情報を準備中です