今回は、Javascriptでid属性を使ってHTML要素を取得する方法をご紹介していきます。
Javascriptの主な役割の一つとして「DOM操作」が挙げられますが、そのDOM操作のためにはまず操作対象であるHTML要素を取得しなければなりません。
今回ご紹介する「getElementById()」は、id属性を指定してHTML要素を取得するためのメソッドです。
Javascript初心者の方々に向けて、分かりやすく簡潔にご説明していきますので、ぜひ最後まで読んでみてくださいね。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
getElementById()とは?
それではまずは、getElementById()の基本的な概念をご説明していきますね。
getElementById()は、その名の通り、id属性から要素(Elements)を取得(get)するためのメソッドです。
クラス名を使ってHTML要素を取得する方法としてgetElementsByClass()
メソッドがありましたが、基本的にはその使い方は同じです。
「getElementsByClass()の使い方がイマイチ分からない…」という方は、ぜひこちらの記事をご覧くださいね。
みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・JavaScriptを使ってHTML要素を取得したい!・getElementsByClassName()メソッドの使い方が知りたい!・getElementsByClass[…]
両者を使い分ける中で注意すべきは、そのメソッド名です。
よく見てみると、getElementById()の場合には、『Element』が単数形になっていることがお分かり頂けるかと思います。
これは、HTMLの構造上、id属性は重複してはならないため、Javascript側もそれを考慮して単数形としているのです。
(※実際、同じid属性が存在する場合でも取得できるのは一つのみです。詳細は後述しますね。)
また、「id属性は重複しない」という特性上、getElementById()の方がgetElementsByClass()よりも処理速度が優れているため、ある特定のHTML要素のみを操作したい場合にはgetElementById()を使用した方が効率的になります。
getElementById()の使い方
文字だけではイメージは湧かないと思いますので、実際にDOM要素を扱いながら学んでいきましょう。
getElementById()の基本的な使い方
getElementById()は以下のように引数にidを指定して使用します。
document.getElementById("id名")
このdocument
の部分は、id属性を取得する際の対象範囲を定義しており、document
とすることでHTML要素全体を指定しています。
それでは早速、実際のHTML要素を使って試してみましょう。
<h1 id="title1">テストタイトル1</h1>
<h1 id="title2">テストタイトル2</h1>
上記のようなHTML要素のうち、”title1″というid属性を持つHTML要素を取得したい場合には、以下のように実装します。
const title = document.getElementById("title1")
console.log(title)
=> <h1 id="title1">テストタイトル1</h1>
getElementById()を使う時の注意点
さて、getElementById()の基本的な使い方を覚えて頂いたところで、続いてはgetElementById()を使用する際の注意点についてご紹介していきます。
注意点その1 idが重複している場合には、1番目の要素のみ取得する
冒頭にて、HTMLの構造上、id属性は重複してはならないと申し上げましたが、仮に重複していた場合には、そのidを使ってHTML要素を取得しようとしても1番目の要素しか取得できません。
以下のようなHTML要素が存在していると仮定します。
<h1 id="title">テストタイトル1</h1>
<h1 id="title">テストタイトル2</h1>
この時、getElementById()を使って”title”というidを持つHTML要素を取得しようとすると、以下のような結果が返ってきます。
const title = document.getElementById("title")
console.log(title)
=> <h1 id="title">テストタイトル1</h1>
このように、id属性が重複してしまっている場合には、1番目に登場するHTML要素のみを取得します。
(※これは、getElementById()が、「id属性が重複していない」という前提を踏まえて、該当の要素を取得できればそこで処理を終えてしまうからです。)
期待した要素が取得できていないような場合には、念の為id属性が重複していないかどうかも確かめてみてくださいね。
注意点その2 指定したidを持つHTML要素が存在しない場合にはnull
が返ってくる
以下のようなHTML要素が存在していると仮定します。
<h1 id="title1">テストタイトル1</h1>
<h1 id="title2">テストタイトル2</h1>
この時、getElementById()の引数をtitle3
としてしまうと、以下の通りnull
が返ってきてしまいます。
const title = document.getElementById("title3")
console.log(title)
=> null
null
に対してメソッドを呼び出してしまうとUncaught TypeError: Cannot read property ‘value’ of nullなどのエラーが発生してしまいますので気をつけて下さいね。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌?
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】
MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまで、JavascriptのgetElementById()を使って、id属性を元にHTML要素を取得する方法をご紹介してきましたがいかがでしたか?
使い方自体は非常にシンプルで、この記事でご紹介した内容さえ頭に入れていただいていれば特に困ることもないと思います。
JavascriptでDOM操作をする際の基本的なメソッドになりますので、ぜひこの機会にマスターしておいてくださいね。
なお、クラス名を使ってHTML要素を取得する方法については以下の記事にて詳しくご説明していますので、こちらもぜひご確認くださいね。
みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・JavaScriptを使ってHTML要素を取得したい!・getElementsByClassName()メソッドの使い方が知りたい!・getElementsByClass[…]
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。