【JavaScript】getElementsByClassName で取得した要素にループ処理を行う方法

JavaScript で特定のクラス名を持つ要素を一括で操作したい場合、getElementsByClassName メソッドが便利です。しかし、このメソッドで取得した要素は HTML コレクションとして返され、配列とは異なるため、直接 forEach でループ処理を行うことができません。本記事では、getElementsByClassName で取得した要素を forEach でループ処理する方法について解説します。

getElementsByClassName とは?

getElementsByClassName は、指定されたクラス名を持つ全ての要素を取得するための JavaScript のメソッドです。このメソッドは、クラス名に一致する全ての要素を含む HTMLCollection オブジェクトを返します。HTMLCollection は配列に似ていますが、配列とは異なり、forEach メソッドが直接利用できません。

HTMLCollection を配列に変換する方法

HTMLCollection を配列として扱うためには、Array.from メソッドまたはスプレッド構文を使用して、配列に変換する必要があります。これにより、forEach を使ってループ処理が可能になります。

実際のコード例

以下に、クラス名 example-class を持つ要素を取得し、それらの要素を forEach でループ処理する具体的なコードを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>getElementsByClassNameとforEachの例</title>
</head>
<body>
    <div class="example-class">要素1</div>
    <div class="example-class">要素2</div>
    <div class="example-class">要素3</div>

    <script>
        // getElementsByClassNameで要素を取得
        const elements = document.getElementsByClassName('example-class');

        // HTMLコレクションを配列に変換し、forEachでループ処理
        Array.from(elements).forEach((element) => {
            element.style.color = 'blue'; // 各要素のテキストを青色に変更
        });

        // またはスプレッド構文を使う方法
        // [...elements].forEach((element) => {
        //     element.style.color = 'blue';
        // });
    </script>
</body>
</html>

コードの解説

  • 要素の取得: document.getElementsByClassName(‘example-class’) で、クラス名 example-class を持つ全ての要素を取得します。
  • 配列に変換: Array.from(elements) を使用して、取得した HTMLCollection を配列に変換します。これにより、forEach などの配列メソッドが利用可能になります。
  • ループ処理: forEach を使用して、各要素に対して処理を行います。この例では、要素内のテキストカラーを青色に変更しています。
  • スプレッド構文の活用: Array.from の代わりに、スプレッド構文 […elements] を使用して HTMLCollection を配列に変換することも可能です。

まとめ

getElementsByClassName を使って取得した要素を forEach でループ処理するためには、まず HTMLCollection を配列に変換する必要があります。これにより、より柔軟で強力な操作が可能となります。ぜひ、この記事を参考にして、クラス名を指定した要素操作をスムーズに行ってください。