prototype.jsを使ってみる 3-getElementById()の省略

Domスクリプトを記述する際に頻繁に出現する『getElementById()』

エレメント（要素）を取得するときに使用しますが、なれるまで結構スペルミスをしてしまいがちです。

また、getElementsByTagName()やgetElementsByClassName()（prototype.jsの独自関数）と組み合わせて記述するとコードが結構な長さになり、可読性が著しく低下します。

$() 関数を使えばその記述方法を簡略化できます。

使用前

elements = document.getElementById(id);

使用後

elements = $(id);

$() 関数を使い特定のIDの中身をアラートに出すサンプルを作ってみたので参考にしてください。

javascriptに記述するコード

//$()関数でID=getの要素の中身を取得しアラートを出す。
function getHtml(){
	alert($('get').innerHTML);
}
//Event.observeでgetHtmlをonloadアクションに追加
Event.observe(window, "load", getHtml, false);

(x)htmlに記述するコード

<div id="get">ＩＤ=getの中身</div>

sample

関連エントリー

script.aculo.usでHTML Slidyを改造
一番簡単な画像置換の方法-imageReplace.js-
アルファ画像を扱うalphafilter.jsライブラリ
prototype.jsを使ってみる 2-Event.observe
prototype.jsを使ってみる 1

スポンサードリンク

«伝わる、WEBテキストのつくりかた -知っておきたい文字情報デザインテクニック | メイン | ＷＥＢサイトがCMを超える日»