getElementsByClassName メソットを使用すると、指定したクラス名が設定されている HTML要素 を取得出来ます。

使い方

以下のようにクラス名を指定します。以下は例です。

document.getElementsByClassName("クラス名");

クラス名には “.” (ドット) を入れないようにして下さい。なお、上記のようにdocumentを指定するとHTMLドキュメント全てが対象範囲となります。

取得できる値

HTMLコレクションが取得出来ます。
HTMLコレクションとはHTML要素の配列のようなものです。

例

基本

試しに、”test” というクラス名を取得します。

HTML

<div class="test">テスト1</div>
<div class="test">テスト2</div>

java script

const elements = document.getElementsByClassName('test');
for (let element of elements) {
  console.log(element);
}

結果

for文を使用してHTML要素を配列から取り出しています。
“test”クラスが指定されたHTML要素が取得出来る事がわかります。

<div class="test">テスト1</div>
<div class="test">テスト2</div>

添え字の指定

for文を使用しHTML要素を取得しましたが、添え字を使用して取得する事も出来ます。

const elements = document.getElementsByClassName('test');
console.log(elements[0]);
console.log(elements[1]);

最後に

特にありません。