こんにちは、ライターのマサトです！
今回は、JavaScriptで任意のクラス名が設定されているHTML要素を取得できる「getElementsByClassName()」について学習をしましょう！
この記事では、
・「getElementsByClassName()」とは？
・「getElementsByClassName()」の使い方
という基本的な内容から、
・複数のクラスを指定する方法
・「getElementsByClassName()」の活用
などの応用的な使い方に関しても解説していきます。
この記事で、「getElementsByClassName()」をしっかり学習して自分のスキルアップを目指しましょう！
「getElementsByClassName()」とは？
それでは、まず最初に「getElementsByClassName()」の基本的な知識から身に付けていきましょう！
「getElementsByClassName()」は、対象となるクラス名が設定されているHTML要素をすべて取得できるメソッドになります。
例えば、次のようにHTML要素にはクラス名が付与されていますよね？
サンプルタイトル
サンプルテキスト
サンプルリンク
クラス名は同じものを複数のHTML要素に付与できるという特徴があります。
そのため、1枚のHTMLファイルの中には同じクラス名がたくさん存在しているのが一般的です。
そこで、「getElementsByClassName()」を使うと任意のクラス名が付与されているHTML要素をすべて抽出できるのです。
「getElementsByClassName()」の使い方
この章では、基本的な使い方について見ていきましょう！
主に、一般的な構文から実際のプログラミング手法について学んでいきます。
基本的な構文と書き方について
まずは、もっとも基本となる構文から見ていきましょう！
対象となる範囲に抽出したいクラス名を文字列で指定することで利用するのが基本です。
document.getElementsByClassName( クラス名 );
対象範囲はdocumentにすることでHTML要素全体を指定することができます。
もちろん、任意の範囲を設定することも可能です。（詳細は後述します）
また、戻り値は配列によく似たHTMLコレクションであるという点に注意しましょう。
任意のクラス名を持つ要素をすべて取得する方法
それでは、実際のプログラミングに挑戦してみましょう！
まずは次のようなHTMLがあると想定してください。
サンプルタイトル１
サンプルテキスト１
サンプルタイトル２
サンプルテキスト２
クラス名が「sample」「test」それぞれ2つずつあるのを確認しておいてください。
そこで、例えば「test」というクラス名を持つHTML要素をすべて取得するには次のように記述します。
const result = document.getElementsByClassName('test');
console.log(result[0]);
console.log(result[1]);
実行結果
サンプルテキスト１
サンプルテキスト２
引数に文字列で「test」を指定すると、そのクラス名を保持するすべてのHTML要素のコレクションが取得できます。
あとは、配列のように添字を使って出力すれば実行結果のようにHTML要素を取得できいます。
複数のクラスを指定する方法
今度は複数クラスの指定方法について見ていきましょう！
例えば次のようなHTMLを見てください！
サンプルタイトル１
サンプルテキスト１
サンプルタイトル２
サンプルテキスト２
この例では、「h1 / h2」要素に2つのクラス名が付与されていますよね？
このような場合でも引数に複数のクラス名を付与すればすべて抽出することができます。
const result = document.getElementsByClassName('sample test');
console.log(result[0]);
console.log(result[1]);
実行結果
サンプルタイトル１
サンプルタイトル２
引数に注目してください！
「sample test」と複数のクラス名を記述することで実行結果のように対象のHTML要素を取得できます。
また、「test sample」のように順番が変わってもちゃんと抽出してくれるので覚えておきましょう。
さらに、p要素には「test」というクラス名が単発で付与されていますが、こちらには反応していないという点も重要です。
「getElementsByClassName()」の活用
この章では、応用的な使い方を見ていきましょう！
主に、任意のHTML範囲を指定してクラスを検出する方法について学んでいきます。
document以外のルート要素を指定する方法
まずは、任意の範囲を検出する方法について見ていきましょう！
これまでは対象とする範囲を「document」にしていたのでHTML全体が対象範囲になっていました。
そこで、範囲を絞るためにdocument以外の対象要素を決めましょう！
例えば次のようなHTML要素を見てみます。
サンプルタイトル１
サンプルテキスト１
サンプルタイトル２
サンプルテキスト２
この例では、div要素を使って階層構造が形成されていますね。
このように記述することで、例えばid属性値「wrap」内にあるHTML要素だけを対象にすることができるわけです。
要素の範囲を指定してクラスを検索する方法
それでは、実際に範囲を指定したプログラミングを行ってみましょう！
先ほどのdiv要素を対象範囲とする場合は次のように記述します。
const div = document.getElementById('wrap');
const result = div.getElementsByClassName('test sample');
console.log(result[0]);
実行結果
サンプルタイトル２
まず最初にdiv要素を取得するために「getElementById()」を使って準備をしておきます。
そのあとに、取得したdiv要素を対象にして「getElementsByClassName()」を実行しているのが分かりますね？
実行結果を見るとdiv要素内にあるh2要素だけを取得しています。
このように、任意の範囲を対象にすることでより効率の良いプログラミングができるので忘れないようにしましょう！
まとめ
今回は、対象のクラス名を持つHTML要素をすべて取得できる「getElementsByClassName()」について学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
・引数に設定したクラス名を持つHTML要素をすべて取得できる
・戻り値は配列ではなくHTMLコレクションになる
・対象範囲を指定して効率よくHTML要素を取得することも可能
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
