JavaScript: getElementsByClassName() クラス名で要素を取得

class属性の値で要素を取得する場合は、document オブジェクトの getElementsByClassName() メソッドを使います。

メソッド名が長いので、手入力よりもエディタの入力補助機能を使って入力することをおすすめします。

分解すると get、Elements、By、Class、Name の５つに分解できます。 最初の get は全て小文字ですが、他は先頭が大文字です。

クラス名を指定した場合、通常は複数の要素が取得できますから、 「getElementsByTagName()」と同じように「Elements」と複数形になっています。

書式

document.getElementsByClassName('class属性値')

サンプルコード

下の li 要素は、奇数番目に「class="odd"」、偶数番目に「class="even"」が設定されています。 このリストから、「class="odd"」の要素のみを取得するプログラムです。

HTML


<ul>
    <li class="odd">リスト1</li>
    <li class="even">リスト2</li>
    <li class="odd">リスト3</li>
    <li class="even">リスト4</li>
    <li class="odd">リスト5</li>
    <li class="even">リスト6</li>
</ul>

JavaScript

// 要素を取得
var c = document.getElementsByClassName('odd');

// 要素数
console.log(c.length);  // 3

// 内容を順番に表示
for (var i = 0; i < c.length; i++){
    console.log(c[i].innerHTML);  // 要素内容が順番に表示される
}

取得した要素の数は c.length で取得できます。

要素内容を取得する場合は c[i].innerHTML で取得できます。 c[i] のように要素番号を指定する必要があります。

JavaScript入門