document.getElementsByClassName() - classで要素を取得する

投稿日: / 更新日:

JavaScriptのdocument.getElementsByClassName()は、ドキュメント内にある、指定したクラス名を持つ全ての要素を取得するメソッドです。取得できるのはHTMLCollectionという、配列と似た構造のデータです。存在しない場合は空のHTMLCollection([])が返ります。半角スペース( )で区切って複数のクラス名を指定でき、その場合は順番を無視したAND条件となります。

サンプルコード

<p class="aaa">要素1</p>
<p class="aaa bbb">要素2</p>
<p class="ccc aaa bbb">要素3</p>
<p class="aaa ccc bbb">要素4</p>
<p class="aaa bbb">要素5</p>
// [aaa]を持つ全ての要素を取得
var elements = document.getElementsByClassName( "aaa" ) ;

// elements(HTMLCollection)の内容
// [0]=<p class="aaa">要素1</p>
// [1]=<p class="aaa bbb">要素2</p>
// [2]=<p class="ccc aaa bbb">要素3</p>
// [3]=<p class="aaa ccc bbb">要素4</p>
// [4]=<p class="aaa bbb">要素5</p>

// [aaa]と[ccc]を持つ全ての要素を取得 (クラス名の順番は無視される)
var elements = document.getElementsByClassName( "aaa ccc" ) ;

// elements(HTMLCollection)の内容
// [0]=<p class="ccc aaa bbb">要素3</p>
// [1]=<p class="aaa ccc bbb">要素4</p>

// 取得した1つ目の要素の文字色を変更 (応用)
elements[0].style.color = "#D36015" ;

デモ

下の「実行」のボタンを押すと、document.getElementByClassName()を使って、指定したクラス名の要素を取得します。分かりやすいように、別途、取得した要素の背景色を変更するようにしています。

構文

HTMLCollection = document.getElementsByClassName( class )

引数

項目説明
class取得したい要素のクラス名を指定する。半角スペース( )で区切って複数のクラス名を指定することができ、その場合は、指定した全てのクラス名を持つ要素だけを取得する。複数指定した場合、クラス名の順番は考慮されない。

戻り値

項目説明
HTMLCollection取得した全ての要素を含んだHTMLCollection(配列)が戻り値となる。

ノート

サポート状況
Ie8以下がサポートしていない。それ以外は、全ブラウザでサポートされている。2016年現在、Ie8以下は無視してもかまわないだろう。当サイトでも1%以下だ。
複数指定したらAND条件
引数で複数のクラス名を指定した場合、OR条件ではなくAND条件になる。指定した全てのクラス名を持つ要素だけを取得できる。クラス名の順番は無視される。
HTMLCollectionとは?
HTMLCollectionとは簡単に言うと、劣化版の配列です。配列と同じように[0]で1つ目、[1]で2つ目というように要素を参照できますが、例えばforEach()pop()など、配列のメソッドを使うことができません。
存在しない場合は空
指定したクラス名の要素が1つもなかった場合、空の配列(HTMLCollection)が返ります。
ドキュメント上にないとダメ
createElement()で作成してドキュメントに挿入していない状態の要素にclassを付けただけでは、getElementsByClassName()で取得することはできない。
連動している
element1element2、それぞれに同じ配列(HTMLCollection)を代入したとします。この時、element1を変更したら、element2にもその変更が反映されます。

例文

全部の要素に処理をする

取得した全ての要素に処理をするにはfor文を利用しましょう。HTMLCollectionは劣化版の配列なので、forEach()が使えません。

// [class="aaa"]を取得
var elements = document.getElementsByClassName( "aaa" ) ;

// 取得した要素の文字色を赤にする (最初の要素から順に処理)
for( var i=0,l=elements.length; l>i; i++ ) {
	var element = elements[i] ;
	element.style.color = "red" ;
}

// 取得した要素の文字色を赤にする (最後の要素から順に処理)
for( var i=elements.length; i--; ) {
	var element = elements[i] ;
	element.style.color = "red" ;
}

存在する場合としない場合で処理を分ける

要素が存在した場合と、1つも存在しなかった場合で処理を分けるには、下記の通りです。空のHTMLCollection(配列)は、trueに相当するので、lengthプロパティ(中身が何個あるか)で判断しないといけません。

// [class="aaa"]を取得
var elements = document.getElementsByClassName( "aaa" ) ;

// 1つ以上、存在した場合
// [elements]だけだと、空でも[true]判定になる
if( elements.length ) {
	// ...

// 1つも存在しなかった場合
} else {
	// ...

}