JavaScript　class属性をキーに要素を取得する方法: getElementsByClassNameメソッドの使い方

JavaScriptのgetElementsByClassNameメソッドを使って、クラス属性をキーにHTMLの要素を取得する方法について解説します。また、同様の取得ができるquerySelectorAllメソッドについても解説します。

HTMLの要素をクラス属性をキーに取得したいのですが、いい方法はありますか？

クラス属性をキーに取得するには、「getElementsByClassNameメソッド」を使用する方法と、「querySelectorAll」を使用する方法があります。

getElementsByClassNameメソッドの概要と使い方

　getElementsByClassNameメソッドは、HTML文書内の指定したクラス名を持つすべての要素を含む「HTMLCollection」オブジェクトを返すメソッドです。

このメソッドを使うことで、指定したクラス名を持つ要素に対して一括して操作を行うことができます。「HTMLCollection」は配列のようなものであり、個別の要素にアクセスすることができます。

document.getElementsByClassName(クラス名);

以下のサンプルプログラムでは、HTMLファイル内にある「test-class」というクラス名を持つすべての要素を取得し、それぞれのテキスト内容をコンソールに出力します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Get Elements By Class Name</title>
</head>
<body>
  <div class="test-class">要素1</div>
  <div class="test-class">要素2</div>
  <div class="test-class">要素3</div>
  <script src="test.js"></script>
</body>
</html>

var elements = document.getElementsByClassName("test-class");

for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent);
}

querySelectorAllメソッドの概要と使い方

　querySelectorAllメソッドは、CSSセレクタを使ってHTML文書内の要素を選択することができるメソッドです。

document.querySelectorAll(CSSセレクタ);

このメソッドは「NodeList」オブジェクトを返し、配列のようなものであり、個別の要素にアクセスすることができます。

　以下のサンプルプログラムは、「.test-class」というCSSセレクタを使ってHTML文書内にある「test-class」というクラス名を持つすべての要素を取得し、それぞれのテキスト内容をコンソールに出力します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Get Elements By Class Name</title>
</head>
<body>
  <div class="test-class">要素1</div>
  <div class="test-class">要素2</div>
  <div class="test-class">要素3</div>
  <script src="test.js"></script>
</body>
</html>

var elements = document.querySelectorAll(".test-class");

for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent);
}

querySelectorAllメソッドとgetElementsByClassNameメソッドの違い

　querySelectorAllメソッドとgetElementsByClassNameメソッドは、HTML文書内の要素を選択するためのJavaScriptのメソッドですが、違いがあります。

方法の違い:
- getElementsByClassNameメソッドは、クラス名をキーに要素を選択するものであり、querySelectorAllメソッドはCSSセレクタを使って要素を選択するものです。このため、querySelectorAllメソッドの方が柔軟性が高く、複雑な選択も可能です。
返すオブジェクトの違い:
- getElementsByClassNameメソッドは「HTMLCollection」オブジェクトを返しますが、querySelectorAllメソッドは「NodeList」オブジェクトを返します。「HTMLCollection」は古い仕様であり、「NodeList」の方が高速であるとされています。
更新されるオブジェクトの違い:
- getElementsByClassNameメソッドで取得した「HTMLCollection」は動的に更新されますが、querySelectorAllメソッドで取得した「NodeList」は更新されません。このため、querySelectorAllメソッドの方が高速であり、一度取得した要素を使い回すことができます。

このように、querySelectorAllメソッドの方がgetElementsByClassNameメソッドよりも優れていると言えます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

この記事のまとめ

etElementsByClassNameメソッドとquerySelectorAllメソッドについて解説します。

getElementsByClassNameメソッドを使うと、class属性をキーに要素を取得することができます。
getElementsByClassNameメソッドは、class属性を持つ複数の要素を取得するためのもので、HTMLCollectionオブジェクトとして返されます。
querySelectorAllメソッドは、CSSセレクタを使ってHTML文書内の要素を選択することができ、NodeListオブジェクトを返す。