[JavaScript] class名からオブジェクトを取得する

投稿日：2016年10月1日更新日：2018年8月22日

タグに付けられたclass名からオブジェクトを取得するには、 document.getElementsByClassNameを使用します。

サンプルソース

例１）classが'abc'の要素を全て取得して要素数を表示する

function test(){
  //クラス名が"abc"の要素を全て取得する
  var elements = document.getElementsByClassName("abc");

  //取得した要素数を表示する
  alert(elements.length);
}

function test(){

//クラス名が"abc"の要素を全て取得する

var elements = document.getElementsByClassName("abc");

//取得した要素数を表示する

alert(elements.length);

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <p class="abc">p class="abc"</p>
  <div class="abc">div class="xyz"</div>
  <p class="abc">p class="abc"</p>
  <div class="abc">div class="abc"</div>
  <p class="abc">p class="xyz"</p>
  <input type="button" value="ボタン" onclick="test();" />
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

</head>

<body>

<p class="abc">p class="abc"</p>

<div class="abc">div class="xyz"</div>

<p class="abc">p class="abc"</p>

<div class="abc">div class="abc"</div>

<p class="abc">p class="xyz"</p>

</body>

</html>

（結果）: 3

getElementsByClassNameの戻り値は配列なので、全要素に処理を行いたい場合は以下のようにします。

例２）getElementsByClassNameで取得した全要素の背景色を黄色にする

//class="c1"の要素を取得する
var aa = document.getElementsByClassName('c1');

//取得した要素全ての背景色を黄色にする
for(var i=0;i<aa.length; i++){
  aa[i].style.backgroundColor = '#ffff00';
}

//class="c1"の要素を取得する

var aa = document.getElementsByClassName('c1');

//取得した要素全ての背景色を黄色にする

for(var i=0;i<aa.length; i++){

aa[i].style.backgroundColor = '#ffff00';

}

解説

document.getElementsByClassNameは指定したクラス名のオブジェクトを全て取得します。
戻り値はNodeList型です。
指定したクラス名のオブジェクトが１つも無い場合、戻り値は0件のNodeList型です。（nullではありません。）
jQueryで同じ事を行いたい場合は、セレクタ「$('.class名')」をご使用ください。
⇒[jQuery] セレクタ一覧

執筆者：とら