【JavaScript入門】getElementsByClassName()でクラス名からHTML要素を複数取得する方法

こんにちは、ライターのマサトです!

今回は、JavaScriptで任意のクラス名が設定されているHTML要素を取得できる「getElementsByClassName()」について学習をしましょう!

この記事では、

・「getElementsByClassName()」とは?
・「getElementsByClassName()」の使い方

という基本的な内容から、

・複数のクラスを指定する方法
・「getElementsByClassName()」の活用

などの応用的な使い方に関しても解説していきます。

この記事で、「getElementsByClassName()」をしっかり学習して自分のスキルアップを目指しましょう!

「getElementsByClassName()」とは?

それでは、まず最初に「getElementsByClassName()」の基本的な知識から身に付けていきましょう!

「getElementsByClassName()」は、対象となるクラス名が設定されているHTML要素をすべて取得できるメソッドになります。

例えば、次のようにHTML要素にはクラス名が付与されていますよね?

クラス名は同じものを複数のHTML要素に付与できるという特徴があります。

そのため、1枚のHTMLファイルの中には同じクラス名がたくさん存在しているのが一般的です。

そこで、「getElementsByClassName()」を使うと任意のクラス名が付与されているHTML要素をすべて抽出できるのです。

「getElementsByClassName()」の使い方

この章では、基本的な使い方について見ていきましょう!

主に、一般的な構文から実際のプログラミング手法について学んでいきます。

基本的な構文と書き方について

まずは、もっとも基本となる構文から見ていきましょう!

対象となる範囲に抽出したいクラス名を文字列で指定することで利用するのが基本です。

対象範囲はdocumentにすることでHTML要素全体を指定することができます。

もちろん、任意の範囲を設定することも可能です。(詳細は後述します)

また、戻り値は配列によく似たHTMLコレクションであるという点に注意しましょう。

任意のクラス名を持つ要素をすべて取得する方法

それでは、実際のプログラミングに挑戦してみましょう!

まずは次のようなHTMLがあると想定してください。

クラス名が「sample」「test」それぞれ2つずつあるのを確認しておいてください。

そこで、例えば「test」というクラス名を持つHTML要素をすべて取得するには次のように記述します。

実行結果

引数に文字列で「test」を指定すると、そのクラス名を保持するすべてのHTML要素のコレクションが取得できます。

あとは、配列のように添字を使って出力すれば実行結果のようにHTML要素を取得できいます。

複数のクラスを指定する方法

今度は複数クラスの指定方法について見ていきましょう!

例えば次のようなHTMLを見てください!

この例では、「h1 / h2」要素に2つのクラス名が付与されていますよね?

このような場合でも引数に複数のクラス名を付与すればすべて抽出することができます。

実行結果

引数に注目してください!

「sample test」と複数のクラス名を記述することで実行結果のように対象のHTML要素を取得できます。

また、「test sample」のように順番が変わってもちゃんと抽出してくれるので覚えておきましょう。

さらに、p要素には「test」というクラス名が単発で付与されていますが、こちらには反応していないという点も重要です。

「getElementsByClassName()」の活用

この章では、応用的な使い方を見ていきましょう!

主に、任意のHTML範囲を指定してクラスを検出する方法について学んでいきます。

document以外のルート要素を指定する方法

まずは、任意の範囲を検出する方法について見ていきましょう!

これまでは対象とする範囲を「document」にしていたのでHTML全体が対象範囲になっていました。

そこで、範囲を絞るためにdocument以外の対象要素を決めましょう!

例えば次のようなHTML要素を見てみます。

この例では、div要素を使って階層構造が形成されていますね。

このように記述することで、例えばid属性値「wrap」内にあるHTML要素だけを対象にすることができるわけです。

要素の範囲を指定してクラスを検索する方法

それでは、実際に範囲を指定したプログラミングを行ってみましょう!

先ほどのdiv要素を対象範囲とする場合は次のように記述します。

実行結果

まず最初にdiv要素を取得するために「getElementById()」を使って準備をしておきます。

そのあとに、取得したdiv要素を対象にして「getElementsByClassName()」を実行しているのが分かりますね?

実行結果を見るとdiv要素内にあるh2要素だけを取得しています。

このように、任意の範囲を対象にすることでより効率の良いプログラミングができるので忘れないようにしましょう!

まとめ

今回は、対象のクラス名を持つHTML要素をすべて取得できる「getElementsByClassName()」について学習をしました!

最後に、もう一度ポイントをおさらいしておきましょう!

・引数に設定したクラス名を持つHTML要素をすべて取得できる
・戻り値は配列ではなくHTMLコレクションになる
・対象範囲を指定して効率よくHTML要素を取得することも可能

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説