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

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

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

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

Javascript初心者の方々に向けて、分かりやすく簡潔にご説明していきますので、ぜひ最後まで読んでみてくださいね。


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質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 など
説明記事
公式サイト



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要素を取得する

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

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