DOM Basic その２

Ajax YUI DOM

DOMの座標の次は、Viewpointについてちらりと書かれている。
Viewpointは聞かない言葉だが、ググッて調べてみると、iPhoneとiTouchに乗っているsafariのmeta要素らしい。
iPhoneとiTouch用の話なので、興味は惹かれるが、先に進む。

次はclass要素のハンドリングについて書かれている。
スタイルシートはid属性、class属性に対して定義するので、サンプリングしておく。
以下がサンプルしたコード。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<!--.testで　class=testの全ての要素に適用する。 -->
<style type="text/css"> 
.test {width:200px; height100px; background-color:yellow;}
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/dom/dom-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/event/event-min.js" >
</script> 

<script type="text/javascript">

init = function() {

	// class属性として、testが定義されているかを判定する。
	bClsName = function(){
		var el1 = document.getElementById("div1");
		// boolean:YAHOO.util.Dom.hasClass(element,classname)
		if(YAHOO.util.Dom.hasClass(el1,"test")){
			alert("element has attribute class=test).");	
		}else{
			alert("element does not have attribute class=test).");	
		}
	}

	// class属性がtestの時に、test1に変更する。
	cClsName = function(){
		var el1 = document.getElementById("div1");
		// YAHOO.util.Dom.hasClass(element,classname)
		// classname=testでなかったらなにもしない。
		YAHOO.util.Dom.replaceClass(el1,"test","test1")
	}

	mClsName = function(){
		var el1 = document.getElementById("div1");
		if(YAHOO.util.Dom.hasClass(el1,"test1")){
			// YAHOO.util.Dom.removeClass(element,classname)
			// classname=testがなかったらなにもしない。
			YAHOO.util.Dom.removeClass(el1,"test1");
			// YAHOO.util.Dom.addClass(element,classname)
			YAHOO.util.Dom.addClass(el1,"test");
		}
	}

	rClsName = function(){
		// Array：YAHOO.util.Dom.getElementsByClassName(classname)
		// 戻り値はArray
		var el1 = YAHOO.util.Dom.getElementsByClassName("test");
		if(el1.length > 0){
			YAHOO.util.Dom.replaceClass(el1[0],"test","test1");
		}else{
			alert("can not find out class=test");
		}
	}

}
</script>
</HEAD>

<BODY onload=init()>
<p>
<DIV id="div1", class="test">
ここのクラス名を判定します。class=testなら黄色になります。
</DIV>
</p>
<p>
<button onclick="bClsName()">
判定
</button>
&nbsp
<button onclick="cClsName()">
変更
</button>
&nbsp
<button onclick="mClsName()">
元に戻す
</button>

</p>
<p>
<button onclick="rClsName()">
class="test"があったらつかまえて、"test1"に変更します。
</button>

</p>

</BODY>
</HTML>

初期（htmlをロード時）の画面は以下。

「判定」ボタンは、YAHOO.util.Dom.hasClass(element,calass_name)のサンプルで、黄色で示されているDIVがclass属性として、"test"をもっているか調べて、結果をアラートボックスにあげる。
あとは順に

YAHOO.util.Dom.replaceClass(element,old_classname,new_classname) elementのclass属性のold_classnameをnew_classnameに置き換える
YAHOO.util.Dom.removeClass(element,classname) elementのclass属性のclassnameを除去する
YAHOO.util.Dom.addClass(element,classname) elementのclass属性にclassnameを追加する
YAHOO.util.Dom.getElementsByClassName(classname) class属性として"classname"を含む、要素を配列れ取得する。

YAHOO.util.Dom.getElementsByClassName(classname)は、(classname, tagname, rootnode)というシグナチャを持つことができて、探索するスコープを限定することで、パフォーマンスがあがると書かれている。

サンプルを動かしてみて気がついたのは、class属性を変えた瞬間に、で指定しているスタイルの適用が更新されること。
すごいもんだ。