JavaScriptでクラス名を取得する：getElementsByClassName()

getElementsByClassName()とは？

getElementByClassName(‘取得したいクラス名’)は（）内に記述したクラス名（引数）を持つすべての要素を取得するメソッドです。取得できるのはHTMLcollectionと言われる配列に似た構造のデータです。要素がない場合は空のHTMLcollectionが返ってきます。

サンプルコード

要素をいくつか用意し、getElementsByClassName()メソッドを使ったらどのような値が返ってくるか実際に確認してみましょう。

HTML

<ul>
    <li class="class1 class2 class3">１つ目</li>
    <li class="class1">２つ目</li>
    <li class="class2">３つ目</li>
    <li class="class3">4つ目</li>
</ul>

JavaScript

document.getElementsByClassName( "class2" );

// 実行結果：[ <li class="class1 class2 class3">１つ目</li>, <li class="class2">3つ目</li>]

document.getElementsByClassName( "class5" );

//　実行結果：[]

１行目の、document.getElementsByClassName();というメソッドでドキュメント内にある指定の要素を取得することができます。引数に指定したクラス名class2というクラスがついたli要素が返ってきたのが確認することができました。引数に指定したclass名の要素がドキュメント内にない場合は、空のHTMLcollectionが返ってきます。

複数のクラス名の要素を取得したい場合

先ほどのHTMLでclass名がclass1と、class2の２つが指定されている要素を取得するメソッドを実行してみましょう。

document.getElementsByClassName( "class1 class2" );

// 実行結果：[ <li class="class1 class2 class3">１つ目</li> ]

class名にclass1とclass2の両方が指定されている要素を取得することができました。複数のclass名が指定されているものを取得したい場合は、(”)内にスペースで区切って追加していきます。書き方は以下のようになります。

getElementsByClassName( "取得したいclass名１ 取得したいclass名2" );