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

Javascript
jQuery
プログラミング言語

公開日時: 2021-03-01 　更新日時: 2022-06-01

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

この記事でわかること

システム エンジニア: getElementByldの使い方を教えてください。

プロジェクト マネージャー: JavaScriptでのgetElementByldの基本的な使い方などを紹介します。

JavaScriptでのgetElementByIdの使い方とは？

今回は、JavaScriptでのgetElementByIdの使い方について説明します。id指定でHTML要素取得する場合getElementByIdを使用します。
基本的な使い方から、複数idの指定方法やjQueryでの記述方法について紹介します。また、getElementByIdの活用事例についても紹介します。
JavaScriptでのgetElementByIdの使い方に興味のある方はぜひご覧ください。

要素の取得

getElementByIdで要素を取得する方法を紹介します。実際のソースコードを見てみましょう。

<p id="target_id">sample content.</p>
 
<script>
  // 要素の取得
  let target = document.getElementById("target_id");
  // 要素の表示
  console.log(target);
  // 要素の値表示
  console.log(target.textContent);
</script>

<p id="target_id">sample content.</p>

// 要素の取得

let target = document.getElementById("target_id");

// 要素の表示

console.log(target);

// 要素の値表示

console.log(target.textContent);

</script>

実行結果は以下のようになります。コンソールログを確認してください。

<p id="target_id">sample content.</p>
sample content.

1 2	<p id="target_id">sample content.</p> sample content.

idが複数存在する場合

通常、idは一意になるようにしますが、複数存在する場合はどうなるでしょうか。実際のソースコードを見てみましょう。

<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>

<p id="target_id">sample content1.</p>

<p id="target_id">sample content2.</p>

// 要素の取得

let target = document.getElementById("target_id");

// 要素の表示

console.log(target);

// 要素の値表示

console.log(target.textContent);

</script>

実行結果は以下のようになります。先に記述したidで取得されることが分かります。

<p id="target_id">sample content1.</p>
sample content1.

1 2	<p id="target_id">sample content1.</p> sample content1.

idが存在しない場合

getElementByIdで指定したidが存在しない場合はどうなるでしょうか。実際のソースコードを見てみましょう。

<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>

<p id="target_id">sample content.</p>

// 要素の取得

let target = document.getElementById("hoge");

// nullチェック

if(target != null){

// 要素の表示

console.log(target);

// 要素の値表示

console.log(target.textContent);

} else {

// nullの場合の処理

console.log("nullです。");

}

</script>

実行結果は以下のようになります。指定したidが存在しない場合はnullになります。

nullです。

nullです。

複数指定

getElementByIdで複数idを指定する方法を紹介します。実際のソースコードを見てみましょう。

<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>

<ul>

</ul>

// 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の方が一般的です。実行結果は以下のようになります。

item1
item2
item3
item4
item5
item1
item2
item3
item4
item5

item1

item2

item3

item4

item5

item1

item2

item3

item4

item5

jQueryで記述

getElementByIdと同じ処理をjQueryで記述する方法を紹介します。実際のソースコードを見てみましょう。

<!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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p id="target_id">sample content.</p>

// 要素の取得

let target = document.getElementById("target_id");

// 要素の表示

console.log(target);

// jQuery

console.log($('#target_id').get(0));

console.log($('#target_id')[0]);

</script>

</body>

</html>

実行結果は以下のようになります。コンソールログを確認してください。

<p id="target_id">sample content.</p>
<p id="target_id">sample content.</p>
<p id="target_id">sample content.</p>

<p id="target_id">sample content.</p>

jQueryで記述した方がシンプルに記述できます。

要素の変更

getElementByIdの活用事例を紹介します。要素を取得して変更してみます。実際のソースコードを見てみましょう。

<p id="target_id">sample content.</p>
 
<script>
  // 要素の取得
  var target = document.getElementById("target_id");
  // 中身を変更
  target.innerHTML = "element changed.";
</script>

<p id="target_id">sample content.</p>

// 要素の取得

var target = document.getElementById("target_id");

// 中身を変更

target.innerHTML = "element changed.";

</script>

実行結果は以下のようになります。

See the Pen
getElementById5 by kskumd (@kskumd)
on CodePen.

要素の追加

取得した要素に対して、要素を追加する方法を紹介します。実際のソースコードを見てみましょう。

<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>

<li id="child1">child1</li>

<li id="child2">child2</li>

<li id="child3">child3</li>

</ui>

// 要素の取得

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.

システム エンジニア: getElementBlydの使い方がわかりました！

プロジェクト マネージャー: getElementBlydの活用方法はいくつかありますで、興味のある方はぜひ挑戦してみてください。

まとめ

今回はJavaScriptでのgetElementByIdの使い方について説明しましたが、いかがでしたでしょうか。

基本的な使い方から複数idの指定方法など、ぜひご自身でソースコードを書いてみて理解を深めていってください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

JavaScriptでのgetElementByIdの使い方とは？

要素の取得

idが複数存在する場合

idが存在しない場合

複数指定

jQueryで記述

要素の変更

要素の追加

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

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

JavaScriptでのgetElementByIdの使い方とは？

要素の取得

idが複数存在する場合

idが存在しない場合

複数指定

jQueryで記述

要素の変更

要素の追加

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryのparentメソッドとは？parentメソッドの使用方法を紹介

jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？

ジェイクエリーとは？メリット・デメリット10選・導入する方法や記述方法を紹介

jQueryのon loadとは？jQueryのon loadは適切に使おう！

jQueryの「id」セレクタを利用する方法9選｜使う際の注意点とは