指定したスタイルシートを持つエレメントを取得する (getElementsByClassName)
説明
指定したスタイルシートを持つエレメントを取得するにはgetElementsByClassName()を使います。パラメータには取得したいスタイルシートクラス名を指定します。Firefox 3以降で使うことができます。
サンプルプログラム
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>指定したスタイルシートを持つエレメントを取得</h1>
<div id="Number01" class="note">Number01 : ここはnoteクラスのみ</div>
<div id="Number02" class="caution">Number02 : ここはcautionクラスのみ</div>
<div id="Number03" class="note caution">Number03 : ここはnoteクラスとcautionクラス</div>
<div id="Number04" class="alert">Number04 : ここはalertクラスのみ</div>
<div id="Number05" class="alert note caution">Number05 : ここはalert, note, cautionクラス</div>
<p>以下のブロックにnoteクラスを持つエレメントのID一覧が表示されます。</p>
<div id="result"></div>
</body>
</html>
【スクリプト】
window.onload = function(){
var ele = document.getElementsByClassName("note");
for (var i=0; i<ele.length; i++){
document.getElementById("result").innerHTML += ele[i].id+"<br>";
}
}