[ThinkIT] 第7回：DOMの拡張（後編） (1/2)

TOP＞システム開発＞要素の拡張

JavaScriptを洗練させるPrototype.js

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

1 2 次のページ

要素の拡張

前回は$関数や$$関数について解説しました。$$関数や$関数を用いてHTML要素（以下、単に要素）を取得すると、新しいメソッドが追加されコードがシンプルになります。前回述べたように、$関数や$$関数は要素を取得した後のことまでしっかりと考えてくれるのです。

$関数や$$関数によって追加されるメソッド

もちろん、$関数や$$関数によって追加されるメソッドはobserveだけではありません。その一覧は表2に紹介してありますので、実際に使う場合の参考にしてください。

メソッド名	説明
hide()	要素を隠す。
show()	隠れている要素を見えるようにする。
visible()	要素が隠れていないかどうかを返す。隠れている場合はfalseを返す。
toggle()	要素が隠れている場合は、要素を見えるようにし、要素が見えている場合は要素を隠す。
remove()	親要素から自要素を削除する。
update(html)	要素のinnerHTMLを書き換える。
replace(html)	要素をHTML文字列に置換する。
inspect()	デバッグ用の文字列を返す。
ancestors()	すべての祖先要素を自要素に近い順に取得し配列で返す。
descendants()	すべての子孫要素を自要素に近い順に取得し配列で返す。
immediateDescendants()	すべての子要素を取得し配列で返す。childNodesと似ているがTextNodeを含まない。
previousSiblings()	前にある兄弟要素を自要素に近い順に取得し配列で返す。
nextSiblings()	後にある弟要素を自要素に近い順に取得し配列で返す。
siblings()	兄弟要素をすべて取得し配列で返す。
match(selector)	CSSセレクタ、1文節分とマッチするかを返す。
up([selector],[index])	ancestors()で取得できる要素群の中からindexで指定された要素を返す。indexが指定されなかった場合は1番目の要素を返す。selectorを指定した場合はCSSセレクタによって要素を絞り、同様のことを行う。また、このメソッドで取得した要素にも、この表のメソッド群が追加されている。
down([selector],[index])	descendants()で取得できる要素群の中からindexで指定された要素を返す。indexが指定されなかった場合は1番目の要素を返す。selectorを指定した場合はCSSセレクタによって要素を絞り、同様のことを行う。また、このメソッドで取得した要素にも、この表のメソッド群が追加されている。
previous([selector],[index])	previousSiblings()で取得できる要素群の中からindexで指定された要素を返す。indexが指定されなかった場合は1番目の要素を返す。selectorを指定した場合はCSSセレクタによって要素を絞り、同様のことを行う。また、このメソッドで取得した要素にも、この表のメソッド群が追加されている。
next([selector],[index])	nextSiblings()で取得できる要素群の中からindexで指定された要素を返す。indexが指定されなかった場合は1番目の要素を返す。selectorを指定した場合はCSSセレクタによって要素を絞り、同様のことを行う。また、このメソッドで取得した要素にも、この表のメソッド群が追加されている。
getElementsBySelector(selector, […])	子要素以下から、指定されたCSSセレクタのルールに一致する要素を取得し配列で返す。複数の引数で呼び出された場合はすべての結果を連結したひとつの配列で返す。このとき、配列のユニーク化は行われない。また、このメソッドで取得した要素にも、この表のメソッド群が追加されている。
getElementsByClassName(className)	子要素以下から、指定された文字列のclass名を持つ要素を取得し配列で返す。また、このメソッドで取得した要素にも、この表のメソッド群が追加されている。
getHeight()	要素の高さを返す。この高さはborderとpaddingを含み、marginを含まない。
hasClassName(className)	要素が指定されたclass名を持っているかを返す。
addClassName(className)	要素にclass名を追加する。
removeClassName(className)	要素からclass名を削除する。
observe(eventName,eventObserver)	要素にイベントで起動する関数を割り当てる。eventNameはonを含まない文字列であり、'click'や'mousemove'のようになる。また、eventObserverは関数オブジェクトである。
stopObserving(eventName,eventObserver)	observeで割り当てたイベントをキャンセルする。eventObserveはobserveで割り当てた関数オブジェクトと同じインスタンスである必要がある。
cleanWhitespace()	子要素から空白のみのTextNodeを削除する。
empty()	要素のinnerHTMLが空または空白の場合にtrueを返す。
childOf(element)	引数で指定した要素が自分の祖先要素である場合にtrueを返す。
scrollTo()	その要素の位置までウィンドウをスクロールさせる。
getStyle(styleProperty)	指定したスタイルの値を取得する。クロスブラウザーを考慮しており、IEでもopacityを取得できる。
setStyle(styleHash)	オブジェクトを渡すと、そのプロパティと値を見てスタイルを定義する。リスト26参照。
getDimensions()	自要素の幅をwidthプロパティに高さをheightプロパティに持ったオブジェクトを返す。その要素が隠されている場合でも取得できる。
makePositioned()	要素のpositionスタイルをrelativeにしてポジショニング可能にする。
undoPositioned()	makePositioned()された要素を元の状態に戻す。
makeClipping()	要素のoverflowスタイルをhideenにしてクリップ化する。
undoClipping()	makeClipping()された要素を元の状態に戻す。
member(object)	includeメソッドのエイリアス。

表2：要素に追加される主なメソッド

しかし、$関数、$$関数を使わずに取得した要素でも、これらのメソッドを使いたい場合があります。そのような場合は、リスト23のようにElement.extend関数を使うことでメソッドを追加できます。

リスト23：要素を拡張してメソッドを追加する


		var element = Element.extend(document.createElement('div'));

また、要素を拡張せずにこれらのメソッドを呼び出すこともできます。その方法は、「Element.メソッド名」という形でメソッドを呼び出すという方法です。この方法で呼び出した場合は、第1引数が対象要素になり、それ以降の引数がひとつずつ後ろにずらされます（リスト24）。

リスト24：要素を拡張しなくてもメソッドを呼び出せる


		// 要素が拡張されている場合

		element.observe('click', eventHandler);

		

		// 要素が拡張されていないくても

		// 以下のように呼び出すことができる。

		Element.observe(element, 'click', eventHandler);

とくに、要素を拡張するまでもない場合はこちらを使った方がパフォーマンスがいいのです。

少し話しはそれますが、実は$$関数は「配列の操作」の項で紹介した配列の操作と非常に相性が良く、リスト22のようなコードならば、たった1行でリスト25のように書き表せます。

リスト25：$$関数と配列の操作を組み合わせる


		<div>hoge</div>

		<div>hoge</div>

		<div>hoge</div>

		<script type="text/javascript">

		$$('div').invoke('observe', 'click',function() { alert(' 要素がクリックされました') });

		</script>

1 2 次のページ

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

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

INDEX
第7回：DOMの拡張（後編）
	要素の拡張
	実用的なクラスを作ってみる