DOM Using getElementsByClassName

Ajax YUI DOM

class名より、要素をオブジェクトとして抽出するメソッド。
引数として、親要素、ルート要素を指定できる。

getElementByIdの拡張といえるが、getElementsByClassName
とあるように、戻り値はArrayになる。
（getElementByIdの場合、該当する先頭要素のみが戻る）

サンプルコードは以下。
このメソッドで選択される要素の個数をカウントして、表示するもの。

<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>
<!-- #style で　id=foo,barの全ての要素に適用する。 -->
<style type="text/css"> 
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
/*　（訳）
body部のマージンとパディングの設定は要素（element）の位置を決める
のにエラーの原因となることが多いので非推奨。
YUIのCSSでは、これをともに0に設定するのを基本にしている
*/
body {
	margin:0;
	padding:0;
}
#foo {
    margin-bottom:1em;
}
</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() {

	var getByClass = function(e) {
		// div要素下でclassnameとしてbarを持つ要素をobjectとして抽出(Array)。
        alert('found: ' + 
        YAHOO.util.Dom.getElementsByClassName('bar', 'div').length + 
        ' elements');
    };

    YAHOO.util.Event.on('demo-run', 'click', getByClass);

}
</script>
</HEAD>

<BODY onload=init()>

<!-- OK -->
<div class="bar">div class="bar"</div>
<!-- NG -->
<div class="bar-baz">div class="bar-baz"</div>
<!-- OK -->
<div class="bar ">div class="bar "</div>
<!-- OK -->
<div class=" bar ">div class=" bar "</div>
<!-- OK -->
<div class="bar baz">div class=" bar baz"</div>
<!-- NG -->
<div class="bar2 baz">div class=" bar2 baz"</div>

<!-- NG -->
<div class="foo">div class="foo"</div>
<!-- NG -->
<div class="foo" id="bar">div class="foo" id="bar"</div>
<!-- OK -->
<div class="foo bar baz">div class="foo bar baz"</div>

<!-- NG -->
<p class="bar">p class="bar"</p>

<button id="demo-run">実行</button>

</BODY>
</HTML>

画面は以下のようになる。