みなさんこんにちは!
今回の記事は、

・getElementsByClassName()メソッドの使い方が知りたい!
・getElementsByClassName()メソッドは複数のclass名を指定できるの?
というお悩みを解決する記事になっています。
・getElementsByClassName()メソッドの使い方
・getElementsByClassName()メソッドで複数のclass名を指定する方法
・getElementsByClassName()メソッドで取得するHTMLの範囲を制限する方法
・getElementsByClassName()メソッドとgetElementsById()メソッドの違い
今回は、JavaScriptを使ってclass名からHTML要素を取得する方法について解説していきます。
Javascriptの主な役割の一つとして「DOM操作」が挙げられますが、そのDOM操作のためにはまず操作対象であるHTML要素を取得しなければなりません。
今回ご紹介する「getElementsByClassName()」は、class名を指定してHTML要素を取得するためのメソッドです。
JavaScriptを使ったDOM操作の第一歩になりますので、JavaScriptを学び始めたばかりの方はぜひ参考にしてみてくださいね。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
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操作をする際の基本的なメソッドになりますので、ぜひこの機会にマスターしておいてくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んでいただきましてありがとうございました。