JavaScriptのgetElementByIdを使いこなそう

（最終更新月：2023年12月）

✔以下のような読者のために書かれています

「JavaScriptでgetElementByIdってどんな機能なの？」

「getElementByIdの使い方を学びたい」

「実際のコード例でgetElementByIdを理解したい」

✔当記事でご紹介する内容

getElementByIdの概要
getElementByIdの使い方とテクニック
実際に役立つgetElementByIdのコーディング例

当記事では、getElementByIdの基本から始めて、さまざまなシナリオでの有効活用法をコードスニペットと共にわかりやすくご説明していきます。

DOM操作のキーとなるこのメソッドの魅力を、ぜひ最後までご覧になって、日々の開発に役立ててください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

getElementByIdの基本

getElementByIdの基本をご覧いただきます。

構文と定義
関数のパラメーターの説明
関数からの戻り値

構文と定義

getElementById関数は、HTMLドキュメント内の指定されたID属性を持つ要素を取得するもの。

この関数の基本的な構文は、以下のとおりです。

document.getElementById(id)

ここで、idは取得したい要素のID属性の文字列です。

例えば、document.getElementById("demo")はid="demo"という属性値を持つ要素を返します。

関数のパラメーターの説明

getElementById関数は、ひとつのパラメーターを取ります。

これはidという文字列で、HTML要素のID属性に対応。

全てのHTML要素に固有のIDを割り当てることが可能で、このIDを関数に渡すと、対応する要素が取得されます。

IDはドキュメント全体で一意でなければいけません。

関数からの戻り値

この関数を呼び出すと、DOM（Document Object Model）内の対応する要素オブジェクトが戻り値として返されます。

もし、指定したIDを持つ要素が存在しない場合、戻り値はnullです。

var myElement = document.getElementById("myId")

myIdを持つ要素への参照がmyElement変数に格納されます。

実際のコード例

実際のコード例を見ていきましょう。

手を動かしながら学べば、身につくのも早いです。

HTMLの準備
JavaScriptでの実行方法
実行後の結果説明

HTMLの準備

実際のコード例を始める前に、動作するHTMLの準備が必要です。

例として、以下のような単純なHTMLコードを考えてみましょう。

<!DOCTYPE html>
<html>
<head>
<title>getElementById Example</title>
</head>
<body>
<p id="demo">これはテスト段落です。</p>
</body>
</html>

こちらの<p>タグにはid="demo"が設定されており、後ほどJavaScriptを使って操作します。

JavaScriptでの実行方法

HTML要素を取得するには、まずHTMLが完全に読み込まれるのを待ってからJavaScriptコードを実行しましょう。

以下のJavaScriptスニペットは、上述のHTMLに対してgetElementByIdを使用する簡単な方法を示します。

document.addEventListener("DOMContentLoaded", function(){
  var elem = document.getElementById("demo");
  console.log(elem.innerHTML);
});

上記のコードは、ドキュメントの読み込みが完了した後に実行され、id="demo"を持つ要素を取得し、その内容をコンソールに表示します。

実行後の結果説明

上述のコードを実行すると、ウェブページのコンソールには以下が表示されます。

これはテスト段落です。

これは、getElementByIdを用いて取得された段落(<p>)タグのテキストが、innerHTML属性により、コンソールに出力されるからです。

これは、プログラムが正常にHTML要素を特定し、その内容を取得できたことを意味します。

getElementByIdを使った実作業

getElementByIdを実際に使う場面をご覧いただきます。

実践で使うイメージが湧いてくるはずです。

要素の取得方法
id属性を活用したスクリプト配置
JavaScript内での変数指定方法

要素の取得方法

ページ内の特定のHTML要素を操作したい際には、getElementById関数を使うのが一般的です。

例えば、以下のJavaScriptコードは、IDがunique-idである要素を取得し、その要素に対する参照をelement変数に格納します。

var element = document.getElementById("unique-id");

このコマンドを実行すると、element変数を通じて対象のHTML要素にアクセスできます。

id属性を活用したスクリプト配置

getElementByIdを効果的に使うためには、HTMLのid属性を理解して適切に配置することが重要です。

以下のHTML要素の例では、各要素にユニークなidが与えられています。

<button id="save-btn">保存</button>
<div id="message-box"></div>

これらのIDを使って、JavaScriptで各要素を簡単に取得し操作できます。

JavaScript内での変数指定方法

取得した要素は、JavaScript内で変数に割り当てられます。

これにより、その要素に対するさまざまな操作が可能です。

例えば、以下のコードスニペットは、特定の要素のテキストを更新します。

var messageBox = document.getElementById("message-box");
messageBox.innerHTML = "操作が成功しました!";

このコードでは、message-boxというIDを持つ<div>要素を取得し、innerHTMLプロパティを使用して、その内容を新しいメッセージに変更しています。

getElementByIdの応用事例

getElementByIdを応用して使う方法です。

文書内容 (innerHTML) を変更
フォームフィールドの値 (value) の操作
クリックイベント (onClick) の追加
スタイル (style) の動的変更

文書内容 (innerHTML) を変更

HTML要素の内容を動的に変更する際によく使用されるプロパティがinnerHTMLです。

getElementByIdで要素を取得した後、innerHTMLプロパティを使って以下のように内容を変更できます。

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "新しいコンテンツ";

このコードは、IDがmyDivである要素の中身を「新しいコンテンツ」というテキストに変更します。

フォームフィールドの値 (value) の操作

フォームのフィールドにも、getElementByIdを利用できます。

フォームフィールドに使うことで以下のようなことが可能です。

テキストボックスに入力された値の取得
セレクトボックスの値変更の取得

例えば、以下のコードはテキストボックスの値を取得し、更新します。

var textField = document.getElementById("myTextField");
console.log(textField.value); // 値をコンソールに出力
textField.value = "新しいテキスト"; // テキストフィールドの値を更新

クリックイベント (onClick) の追加

getElementByIdを使って取得した要素に対して、イベントリスナーを追加できます。

例えば、以下のコードでclickイベントの追加が可能。

var myButton = document.getElementById("myButton");
myButton.onclick = function() {
  alert("ボタンがクリックされました！");
};

このスクリプトはボタンがクリックされるとアラートを表示します。

スタイル (style) の動的変更

getElementByIdを用いて取得した要素のスタイルも、JavaScriptを使って動的な変更が可能です。

以下のジャンプするコミットでは、要素の色とフォントサイズを変更しています。

var myDiv = document.getElementById("myDiv");
myDiv.style.color = "red";
myDiv.style.fontSize = "20px";

これはmyDivというIDを持つ要素のテキストの色を赤に、そしてフォントサイズを20ピクセルに変更します。

取り扱いの注意

getElementByIdの使用時には以下のことに気をつけましょう。

返り値がnullになるケース
IDの重複とそれに関する注意点

返り値がnullになるケース

getElementById関数により、値がnullになるオブジェクトの操作には、注意が必要です。

指定されたIDの要素がページに存在しない場合nullを返し、そのnullであるオブジェクトを操作するとエラーが発生します。

以下のチェックはnullを防ぐために重要です。

var myElement = document.getElementById("nonExistentId");
if (myElement) {
  // myElementが存在する場合のみ操作を実行する
  myElement.style.color = "blue";
} else {
  console.log("指定したIDの要素が見つかりません");
}