getElementByIdの使い方|基本的な使い方からjQueryでの記述方法まで紹介!

エンジニア
マネージャー
JavaScriptでのgetElementByIdの使い方とは?
今回は、JavaScriptでのgetElementByIdの使い方について説明します。id指定でHTML要素取得する場合getElementByIdを使用します。
基本的な使い方から、複数idの指定方法やjQueryでの記述方法について紹介します。また、getElementByIdの活用事例についても紹介します。
JavaScriptでのgetElementByIdの使い方に興味のある方はぜひご覧ください。
要素の取得
getElementByIdで要素を取得する方法を紹介します。実際のソースコードを見てみましょう。
1 2 3 4 5 6 7 8 9 10 |
<p id="target_id">sample content.</p> <script> // 要素の取得 let target = document.getElementById("target_id"); // 要素の表示 console.log(target); // 要素の値表示 console.log(target.textContent); </script> |
実行結果は以下のようになります。コンソールログを確認してください。
1 2 |
<p id="target_id">sample content.</p> sample content. |
idが複数存在する場合
通常、idは一意になるようにしますが、複数存在する場合はどうなるでしょうか。実際のソースコードを見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 |
<p id="target_id">sample content1.</p> <p id="target_id">sample content2.</p> <script> // 要素の取得 let target = document.getElementById("target_id"); // 要素の表示 console.log(target); // 要素の値表示 console.log(target.textContent); </script> |
実行結果は以下のようになります。先に記述したidで取得されることが分かります。
1 2 |
<p id="target_id">sample content1.</p> sample content1. |
idが存在しない場合
getElementByIdで指定したidが存在しない場合はどうなるでしょうか。実際のソースコードを見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<p id="target_id">sample content.</p> <script> // 要素の取得 let target = document.getElementById("hoge"); // nullチェック if(target != null){ // 要素の表示 console.log(target); // 要素の値表示 console.log(target.textContent); } else { // nullの場合の処理 console.log("nullです。"); } </script> |
実行結果は以下のようになります。指定したidが存在しない場合はnullになります。
1 |
nullです。 |
複数指定
getElementByIdで複数idを指定する方法を紹介します。実際のソースコードを見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<ul> <li id="sample-1">item1</li> <li id="sample-2">item2</li> <li id="sample-3">item3</li> <li id="sample-4">item4</li> <li id="sample-5">item5</li> </ul> <script> // li要素の取得 var li_elements = document.getElementsByTagName('li'); // li要素の繰り返し for (var i = 1; i <= li_elements.length; ++i) { // id指定で取得 console.log(document.getElementById("sample-" + i).textContent); } // li要素の取得 var li_list = document.querySelectorAll("[id^=sample]"); for(var i = 0; i < li_list.length; i++){ // 結果表示 console.log(li_list[i].textContent); } </script> |
id指定でまとめて取得するのは、querySelectorAllの方が一般的です。実行結果は以下のようになります。
1 2 3 4 5 6 7 8 9 10 |
item1 item2 item3 item4 item5 item1 item2 item3 item4 item5 |
jQueryで記述
getElementByIdと同じ処理をjQueryで記述する方法を紹介します。実際のソースコードを見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script> </head> <body> <p id="target_id">sample content.</p> <script> // 要素の取得 let target = document.getElementById("target_id"); // 要素の表示 console.log(target); // jQuery console.log($('#target_id').get(0)); console.log($('#target_id')[0]); </script> </body> </html> |
実行結果は以下のようになります。コンソールログを確認してください。
1 2 3 |
<p id="target_id">sample content.</p> <p id="target_id">sample content.</p> <p id="target_id">sample content.</p> |
jQueryで記述した方がシンプルに記述できます。
要素の変更
getElementByIdの活用事例を紹介します。要素を取得して変更してみます。実際のソースコードを見てみましょう。
1 2 3 4 5 6 7 8 |
<p id="target_id">sample content.</p> <script> // 要素の取得 var target = document.getElementById("target_id"); // 中身を変更 target.innerHTML = "element changed."; </script> |
実行結果は以下のようになります。
See the Pen
getElementById5 by kskumd (@kskumd)
on CodePen.
要素の追加
取得した要素に対して、要素を追加する方法を紹介します。実際のソースコードを見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ui id="parent"> <li id="child1">child1</li> <li id="child2">child2</li> <li id="child3">child3</li> </ui> <script> // 要素の取得 var parent = document.getElementById("parent"); // 子要素を作成 var child = document.createElement("li"); // id要素とinnerText要素を設定 child.id = "appendChild1"; child.innerText = "appendChild1"; // 要素を追加 parent.appendChild(child); </script> |
実行結果は以下のようになります。
See the Pen
getElementById6 by kskumd (@kskumd)
on CodePen.
エンジニア
マネージャー
まとめ
今回はJavaScriptでのgetElementByIdの使い方について説明しましたが、いかがでしたでしょうか。
基本的な使い方から複数idの指定方法など、ぜひご自身でソースコードを書いてみて理解を深めていってください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万~55万円東京都豊島区(池袋駅)