第6回：DOMの拡張（前編） (1/2)

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

JavaScriptを洗練させるPrototype.js

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

1 2 次のページ

DOMの拡張

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

$関数

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

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

リスト19：$関数でDOMの要素を書き換える


		<div id="target"></div>

		<script type="text/javascript">

		var element = $('target');

		element.innerHTML = ' 要素の内容';

		</script>

&nbspまた、$関数は要素が指定されるとそのままその要素を返します。これを使うことによって、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 次のページ

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

IT戦記
http://d.hatena.ne.jp/amachang/

INDEX
第6回：DOMの拡張（前編）
	DOMの拡張
	要素の拡張

JavaScriptを洗練させるPrototype.js
第1回	Prototype.jsを使う準備
第2回	JavaScriptの復習
第3回	Prototype.js流のオブジェクト指向を理解する
第4回	関数の拡張と配列操作メソッド一覧
第5回	代表的なメソッドの紹介
第6回	DOMの拡張（前編）
第7回	DOMの拡張（後編）

タイプ

連載

特集

新着記事

人気記事トップ10

企画広告も役立つ情報バッチリ！ Sponsored