特定のクラスを持つエレメントを取得する

書式

YAHOO.util.Dom.getElementsByClassName(className, tagName, root)

className : クラス名
tagName : タグ名【省略可能】
root : 基準位置【省略可能】

説明

　特定のクラスを持つエレメントを取得するにはYAHOO.util.Dom.getElementsByClassName()を使います。最初のパラメータに取得したいクラス名を指定します。特定のタグの中から取得する場合には2番目のパラメータにタグ名を指定します。入れ子になっているエレメントの特定の箇所から取得する場合には3番目のパラメータに取得基準とするエレメントを指定します。
Ajaxライブラリ リファレンス

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript"><!--
function getCSSClass(){
var objList = YAHOO.util.Dom.getElementsByClassName("note", "div");
for(var i=0; i<objList.length; i++) {
YAHOO.util.Dom.get("result").innerHTML += objList[i].id+"<br>";
}
}
// --></script>
</head>
<body>
<h1>特定のクラスを持つエレメントを取得</h1>
<form>
<input type="button" value="divタグでnoteクラスのものを取得" onClick="getCSSClass()">
</form>
<div id="result"></div>
<hr>
<div id="box1" class="note">box1:ここはnoteクラスです</div>
<div id="box2" class="note">box2:ここもnoteクラスです</div>
<div id="box3" class="caution">box3:ここはcautionクラスです</div>
<p id="box4" class="note">box4:ここもnoteクラスです。でもpタグ</p>
</body>
</html>