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

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・JavaScriptを使ってHTML要素を取得したい!
・getElementsByClassName()メソッドの使い方が知りたい!
・getElementsByClassName()メソッドは複数のclass名を指定できるの?

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


この記事の内容

・getElementsByClassName()メソッドの使い方
・getElementsByClassName()メソッドで複数のclass名を指定する方法
・getElementsByClassName()メソッドで取得するHTMLの範囲を制限する方法
・getElementsByClassName()メソッドとgetElementsById()メソッドの違い


今回は、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">テストタイトル1</h1>
<p class="text">テストテキスト1</p>
 
<h1 class="title">テストタイトル2</h1>
<p class="text">テストテキスト2</p>

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

const titles = document.getElementsByClassName("title")

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="test-container">
  <h1 class="title">テストタイトル2</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">テストタイトル2</h1>

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

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

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

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

getElementsByClassName()getElementById()
引数に指定する属性class属性id属性
取得する要素数複数取得可能一つだけ取得する
要素がない場合の戻り値lengthが0のNodeList(IEやEdgeだとHTMLCollection)null

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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