getElementsByClassName()

ゲットエレメントバイクラスネーム（DOM操作）

意味クラス名で要素群を取得

getElementsByClassName()とは？

getElementsByClassNameメソッドは、指定したクラス名を持つすべての要素をドキュメントから取得します。

getElementsByClassName()の具体的な使い方

クラス名で要素を取得し表示する例

<button onclick='showElementsByClassName()'>getElementsByClassNameの使用例</button>
<script>
function showElementsByClassName() {
  let items = document.getElementsByClassName('myClass');
  let textContents = Array.from(items).map(item => item.textContent);
  alert('myClassクラスを持つアイテム: ' + textContents.join(', '));
}
</script>
<div class='myClass'>アイテム1</div>
<div class='myClass'>アイテム2</div>

クラス名 'myClass' を持つ全ての要素を取得し、それらのテキスト内容を配列に保存し、最後に配列の内容をアラートで表示します。

複数のクラス名を指定して要素を取得する例

let elements = document.getElementsByClassName('class1 class2');
console.log('class1とclass2の両方を持つ要素の数:', elements.length);

👇出力結果

class1とclass2の両方を持つ要素の数: 2

'class1'と'class2'の両方のクラスを持つ要素を取得し、その数をコンソールに出力します。

getElementsByClassName()に関するよくある質問

Q. 返り値は配列ですか？

A. いいえ、getElementsByClassName()の返り値は配列ではなく、HTMLCollectionオブジェクトです。配列のメソッドを使用したい場合は、Array.from()で配列に変換する必要があります。

Q. 大文字小文字は区別されますか？

A. クラス名の大文字小文字は区別されます。'MyClass'と'myClass'は異なるクラスとして扱われます。

Q. 複数のクラスを指定できますか？

A. はい、スペース区切りで複数のクラスを指定できます。例えば、'class1 class2'と指定すると、両方のクラスを持つ要素が取得されます。

getElementsByClassName()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのgetElementsByClassName()やclassList.toggle()、getAttribute()、HTMLCollection、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。