【JavaScript】getElementsByClassName()でclass名からHTML要素を取得する

みなさんこんにちは！

今回の記事は、

というお悩みを解決する記事になっています。

今回は、JavaScriptを使ってclass名からHTML要素を取得する方法について解説していきます。

Javascriptの主な役割の一つとして「DOM操作」が挙げられますが、そのDOM操作のためにはまず操作対象であるHTML要素を取得しなければなりません。

今回ご紹介する「getElementsByClassName()」は、class名を指定してHTML要素を取得するためのメソッドです。

JavaScriptを使ったDOM操作の第一歩になりますので、JavaScriptを学び始めたばかりの方はぜひ参考にしてみてくださいね。

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

getElementsByClassName()とは？

それではまずは、getElementsByClassName()メソッドの基本的な概念をご説明していきます。

getElementsByClassName()メソッドは、その名の通り、class名（ClassName）から要素（Elements）を取得（get）するためのメソッドです。

一般的に、HTML要素に付与されているclassの用途として思いつくのは、そのclassに対してスタイルを定義（CSS）することでHTML要素のデザインやレイアウトを整えることだと思います。

しかしJavaScriptでもこのclassは利用されることが多く、今回ご紹介するgetElementsByClassName()を使用することで、指定したclassを持つHTML要素を全て取得することができるのです。

次章より、その使い方をご紹介していきます。

getElementsByClassName()メソッドの使い方

文字だけではイメージは湧かないと思いますので、実際にDOM要素を扱いながら学んでいきましょう。

getElementsByClassName()メソッドの基本構文

getElementsByClassName()は以下のようにクラス名を指定して使用します。

document.getElementsByClassName("クラス名")

この「document」の部分は、class名を取得する際の対象範囲を定義しており、documentとすることでHTML要素全体を指定しています。
（※もちろん、変更することも可能です。その方法は後ほどご紹介しますね。）

それでは早速、実際のHTML要素を使って試してみましょう。

<h1 class="title">テストタイトル１</h1>
<p class="text">テストテキスト１</p>
 
<h1 class="title">テストタイトル2</h1>
<p class="text">テストテキスト２</p>

上記のようなHTML要素のうち、”title”というclassを持つHTML要素を取得したい場合には、以下のように実装します。

const titles = document.getElementsByClassName("title")

console.log(titles)
=> [<h1 class="title">テストタイトル１</h1>, <h1 class="title">テストタイトル２</h1>]

このように、該当するHTML要素が存在した場合には、配列に似た「HTMLcollection」というオブジェクトが返ってきます。

また、指定したclassを持つHTML要素が複数存在する場合にはそれら全てを取得する一方で、該当する要素が見つからなかった場合には、空の要素が返ってきます。

なお、各々の要素を取得したい場合には、配列と同様の方法で取得可能です。

console.log(titles[0])
=> <h1 class="title">テストタイトル１</h1>
 
console.log(titles[1])
=> <h1 class="title">テストタイトル２</h1>

getElementsByClassName()メソッドで複数のclass名を指定する

また、複数のclass名を指定してHTML要素を取得することも可能です。

<h1 class="title test-title1">テストタイトル１</h1>
<p class="text">テストテキスト１</p>
 
<h1 class="title test-title2">テストタイトル2</h1>
<p class="text">テストテキスト２</p>

上記のHTML要素のうち、”title test-title1″というクラスを持っている要素のみを取得したい場合には、以下の通り実装します。

const title = document.getElementsByClassName("title test-title1")

console.log(title)
=> <h1 class="title test-title1">テストタイトル１</h1>

この時、“title”というクラスは持っていても”test-title1″というクラスを持っていない要素は取得されていないという点にもご注意くださいね。

getElementsByClassName()メソッドで取得する範囲を制限する

さて、これまでは、getElementsByClassName()メソッドで取得するHTML要素の範囲を全体（document）に指定していましたが、この範囲を制限することも可能です。

<h1 class="title test-title1">テストタイトル１</h1>

<div class="test-container">
  <h1 class="title">テストタイトル２</h1>
</div>

上記のようなHTML要素のうち、「”test-container”というクラスを持つdiv要素」の中の「”title”というクラスを持つHTML要素」のみを取得したい場合には、以下のように実装します。

const container = document.getElementsByClassName("test-container")

const title = container.getElementsByClassName("title")

console.log(title)
=> <h1 class="title">テストタイトル２</h1>

上記の通り、最初にdocumentから対象のHTML要素（ここでは「test-container」）を取得し、その要素に対してgetElementsByClassName()メソッドを呼び出すことで、classで検索する範囲を制限することが可能です。

getElementsByClassName()メソッドとgetElementById()メソッドの違い

 JavasScriptでHTML要素を取得する際、getElementsByClassName()メソッドと混同しやすいものとして、getElementById()メソッドがあります。

この機会に、それぞれの違いについても以下の表にまとめましたので、ぜひ参考にしてください。

最後に

さて、ここまで、JavascriptのgetElementsByClassName()メソッドを使って、class名を元にHTML要素を取得する方法をご紹介してきましたがいかがでしたか？

使い方自体は非常にシンプルで、この記事でご紹介した内容さえ頭に入れていただいていれば特に困ることもないと思います。

JavascriptでDOM操作をする際の基本的なメソッドになりますので、ぜひこの機会にマスターしておいてくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んでいただきましてありがとうございました。