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

getElementsByClassName()とは?

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

サンプルコード

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

HTML

<ul>
    <li class="class1 class2 class3">1つ目</li>
    <li class="class1">2つ目</li>
    <li class="class2">3つ目</li>
    <li class="class3">4つ目</li>
</ul>

JavaScript

document.getElementsByClassName( "class2" );

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

document.getElementsByClassName( "class5" );

// 実行結果:[]

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

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

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

document.getElementsByClassName( "class1 class2" );

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

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

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

イベント

2017/12/05(火)
Design Thinking Square