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

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

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

この記事では、

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

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

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

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

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

「getElementsByClassName()」とは?

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

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

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

サンプルタイトル

サンプルテキスト

サンプルリンク

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

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

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

「getElementsByClassName()」の使い方

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

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

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

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

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

document.getElementsByClassName( クラス名 );

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

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

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

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

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

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

サンプルタイトル1

サンプルテキスト1

サンプルタイトル2

サンプルテキスト2

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

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

const result = document.getElementsByClassName('test');

console.log(result[0]);
console.log(result[1]);

実行結果

サンプルテキスト1

サンプルテキスト2

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

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

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

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

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

サンプルタイトル1

サンプルテキスト1

サンプルタイトル2

サンプルテキスト2

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

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

const result = document.getElementsByClassName('sample test');

console.log(result[0]);
console.log(result[1]);

実行結果

サンプルタイトル1

サンプルタイトル2

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

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

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

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

「getElementsByClassName()」の活用

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

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

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

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

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

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

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

サンプルタイトル1

サンプルテキスト1

サンプルタイトル2

サンプルテキスト2

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

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

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

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

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

const div = document.getElementById('wrap');

const result = div.getElementsByClassName('test sample');
  
console.log(result[0]);

実行結果

サンプルタイトル2

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

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

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

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

まとめ

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

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

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

マサト

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー