【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を学び始めたばかりの方はぜひ参考にしてみてくださいね。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


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操作をする際の基本的なメソッドになりますので、ぜひこの機会にマスターしておいてくださいね。

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

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