【Javascript】idでHTML要素を取得する方法(getElementById()を使おう)

今回は、Javascriptでid属性を使ってHTML要素を取得する方法をご紹介していきます。

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

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

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社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


getElementById()とは?

それではまずは、getElementById()の基本的な概念をご説明していきますね。

getElementById()は、その名の通り、id属性から要素(Elements)を取得(get)するためのメソッドです。

クラス名を使ってHTML要素を取得する方法としてgetElementsByClass()メソッドがありましたが、基本的にはその使い方は同じです。

「getElementsByClass()の使い方がイマイチ分からない…」という方は、ぜひこちらの記事をご覧くださいね。

おすすめ記事

みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・JavaScriptを使ってHTML要素を取得したい!・getElementsByClassName()メソッドの使い方が知りたい!・getElementsByClass[…]

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

両者を使い分ける中で注意すべきは、そのメソッド名です。

よく見てみると、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[…]

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

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

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