JavaScript - getElementsByClassName()の使い方

JavaScriptで「クラス名」から該当要素を取得したい場合は、 getElementsByClassName()メソッドを使います。

getElementsByTagName()と同じように、 複数の要素を取得する可能性があるため、 「Elements」と複数形になっています。

戻り値はHTMLCollectionオブジェクトです。

getElementsByClassName()の構文

document.getElementsByClassName('クラス名')

クラス名 = クラス属性値

サンプルコード

HTML

次のHTMLは、p要素が4つあり、「class="cls1"」が２つ、 「class="cls2"」が２つあります。

<p class="cls1">コンテンツ1</p>

<p class="cls2">コンテンツ2</p>

<p class="cls1">コンテンツ3</p>

<p class="cls2">コンテンツ4</p>

JavaScript

次のコードは、「class="cls1"」の要素のみを取得します。

var elems = document.getElementsByClassName('cls1');

for (var i = 0; i < elems.length; i++){
	console.log(elems[i].textContent);
}

console.log(elems);

// 実行結果 -----------

コンテンツ1
コンテンツ3
HTMLCollection [ p.cls1, p.cls1 ]

該当クラス名がない場合

先程と同じHTMLを使って、存在しないクラス名を指定してみます。

var elems = document.getElementsByClassName('cls3');

for (var i = 0; i < elems.length; i++){
	console.log(elems[i].textContent);
}

console.log(elems);

// 実行結果-----------

HTMLCollection { length: 0 }

HTMLCollection { length: 0 }と表示されているように、 該当クラス名がない場合は、空のHTMLCollectionオブジェクトを返します。

この辺りの動作はgetElementsByTagName()と同じです。