【JavaScript】getElementByIdとは？基本的な使い方や実践例を初心者向けに解説

フロントエンド開発•
JavaScriptHTML/CSS

はじめに

JavaScriptでWebページを操作するときに、真っ先に覚えるメソッドのひとつがgetElementByIdです。
これはブラウザ上に表示されているHTMLの要素を取得するための方法で、簡単に要素を見つけることができます。
コードを書くうえで頻繁に使うため、初心者の皆さんにとっても重要な基礎知識といえるでしょう。

しかし、単に要素を取得できるだけではなく、実務においては画面の動的な更新やユーザーからの入力チェック、イベントの処理など、さまざまな場面で役立ちます。
たとえば、ボタンをクリックしたときに画面上の特定の領域にメッセージを表示するケースや、入力フォームに文字を入力したときにリアルタイムでチェックを行う場面がよくあるのではないでしょうか。

こうした具体的な操作の背景には DOM (Document Object Model)という仕組みがあります。
このDOMを理解すると、getElementByIdの役割をより深くイメージできるようになります。
初心者の皆さんが最初につまずきやすいポイントは「HTML要素がどのようにJavaScriptから認識されているのか」というところです。

本記事では、この疑問を解消しながら、getElementByIdを中心に実務で使える具体例をいくつも紹介します。
フォーム操作やイベントハンドリング、さらにほかの要素取得メソッドとの比較も行い、皆さんの開発現場でのイメージがわきやすいように丁寧に解説していきます。
まずは、この記事の内容をざっと確認してみましょう。

この記事を読むとわかること

  • getElementByIdとは何か
  • DOMの仕組みと要素取得の基本メカニズム
  • getElementByIdを使ったさまざまなコード例
  • 実務におけるフォーム操作やイベントハンドリングの活用シーン
  • よくあるトラブルや注意点、さらに発展的な使い方

getElementByIdとは何か

JavaScriptで要素を取得する代表的な方法としてgetElementByIdがあります。
HTML側で付与された要素のid属性を指定することで、その要素の参照を簡単に手に入れることができます。

たとえば以下のようなHTMLをイメージしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>getElementByIdの例</title>
</head>
<body>
  <div id="greeting">Hello, World!</div>
</body>
</html>

この<div>要素に対してJavaScriptからアクセスしたい場合は、次のように書きます。

const element = document.getElementById("greeting");
console.log(element.textContent); // Hello, World!

このコードではgetElementById("greeting")を使って、id="greeting"の要素を取得しています。
取得した要素はオブジェクトとして扱うことができ、textContentプロパティやinnerHTMLプロパティを通じて要素内のテキストやHTMLを参照できます。

ここで、getElementByIdは一つの要素のみを返す点が特徴です。
もし同じidを複数の要素で重複して使っているときは、最初に見つかった一つの要素が返ってくるという点に注意してください。
本来、idは文書中で一意であるべきなので、意図せず重複するケースを作らないように気をつけると良いでしょう。

DOMの基礎

JavaScriptでHTML要素を扱うときは、 DOM (Document Object Model)という考え方を押さえる必要があります。
これはHTML文書をツリー構造として表現し、要素を「ノード」という形でアクセスできるようにするモデルです。

Webページをブラウザが読み込むと、ブラウザ内部でDOMツリーが生成されます。
そのDOMツリーの中からidをキーとして特定の要素を探す方法の一つが、まさにgetElementByIdです。
DOMツリーを通して要素を取得すると、その要素のテキストや属性、あるいはスタイルなどを変更可能になります。

たとえば、ヘッダーやフッターの領域、メインコンテンツ、サイドバーなどもすべてDOMツリー内の「ノード」です。
こうしたノードの中から必要な部分だけを取り出し、ページの一部を書き換える操作が日常的に行われます。
そのため、DOMという概念をしっかり頭に入れておくと、どうしてgetElementById("greeting")で要素が取れるのか、理解しやすくなります。

また、DOMには親子関係や兄弟関係といった階層構造があります。
実装上、親要素から順にたどっていくような処理や、兄弟要素の属性を参照するような処理も一般的です。
そうした場面でも、まずはgetElementByIdで特定の要素をつかみ、そこから階層を下にたどるか、隣の要素にアクセスするといった操作が可能になります。

getElementByIdの基本的な使い方

先ほども少し触れましたが、getElementByIdの使い方はとてもシンプルです。
以下のように書くだけで、HTMLの中から特定の要素を呼び出せます。

const targetElement = document.getElementById("someId");

"someId"の部分に、HTML側で定義したid属性を渡してください。
もし指定したidに該当する要素が存在しない場合は、nullが返ってきます。

ここで押さえておきたいポイントとして、JavaScriptコードが実行されるタイミングがあります。
HTMLの読み込みが完了する前にgetElementByIdを呼び出すと、意図した要素を取得できないことがあるのです。
多くの場合は、HTMLファイルの最後のほう（</body>タグの直前）にJavaScriptコードを書く、あるいはDOMContentLoadedイベント（あるいはそれに準じた方法）を使うことで対応します。

<body>
  <div id="someId">サンプルテキスト</div>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const target = document.getElementById("someId");
      console.log(target.textContent);
    });
  </script>
</body>

こうしておくと、DOMの構築が完了してからgetElementByIdが実行されるため、安全に要素を取得できます。
実務でありがちなのは、スクリプトを<head>タグ内に書いてしまい、読み込み順の影響でエラーになるパターンです。
この点は初心者の方が混乱しやすいので注意してください。

要素のスタイルや内容の変更方法

getElementByIdで取得した要素は、スタイルや内容を柔軟に変更できます。
たとえば、背景色を変えたい場合は、以下のような書き方でstyleプロパティを通じて変更可能です。

const box = document.getElementById("colorBox");
box.style.backgroundColor = "blue";

また、要素のテキストを更新したいときは、textContentを使うことが多いです。

const textDiv = document.getElementById("textContainer");
textDiv.textContent = "新しいテキストが入りました。";

テキストではなくHTML構造を挿入したい場合は、innerHTMLを使います。
ただし、innerHTMLを使うと入力するHTML文字列をパースして要素に反映するため、不用意に外部データを入れるとセキュリティリスクが高まることもあります。
実務上はリスクと利便性の両方を考慮して使い分けると良いでしょう。

さらに、クラスを切り替えたい場合はclassListプロパティが便利です。
たとえば、CSSクラスの追加や削除、切り替えは次のように行えます。

const box2 = document.getElementById("myBox");
box2.classList.add("highlight");
box2.classList.remove("shadow");
box2.classList.toggle("hidden");

このように、getElementByIdで取得した要素を起点として、実に多様な操作ができるのがJavaScriptとDOMの魅力といえます。

イベントハンドリングでの活用

Webページでよく行われるのが、ボタンのクリックやテキスト入力時に処理を行うといった「イベントハンドリング」です。
getElementByIdは、こうしたイベントハンドリングの要素取得でも大いに役立ちます。

たとえば、ボタンをクリックするとメッセージを表示する例を考えてみましょう。
HTMLでボタンとメッセージ表示部分を定義しておきます。

<button id="showMessageBtn">メッセージを表示</button>
<div id="messageBox" style="display: none;">こんにちは！</div>

そしてJavaScriptで要素を取得して、イベントリスナーを追加します。

const showMessageBtn = document.getElementById("showMessageBtn");
const messageBox = document.getElementById("messageBox");

showMessageBtn.addEventListener("click", () => {
  messageBox.style.display = "block";
});

ここでは、クリックイベントが発生した際にmessageBoxのdisplayスタイルをblockに変更して、メッセージを表示させています。
こういったシンプルな例から、複雑なフォームの入力チェックや、マウスオーバー時のアニメーション発火、ドラッグ&ドロップなど、イベント処理は幅広く実務で使われます。

イベントリスナーを登録した要素を意識的に管理すれば、画面のアップデートをスムーズにコントロールできます。
これが複数の要素にまたがる場合には、IDだけでなくクラスやセレクタを活用したり、イベントの委譲などの方法も検討する必要が出てきます。

他の要素取得メソッドとの比較

getElementByIdと同様に、DOM要素を取得するためのメソッドはいくつか存在します。
たとえば、クラス名を使うgetElementsByClassNameや、タグ名を使うgetElementsByTagName、より自由度の高いCSSセレクタを使うquerySelectorやquerySelectorAllなどが挙げられます。

getElementById("someId")

単一の要素を取得する。該当の要素がなければnull。

getElementsByClassName("someClass")

特定のクラスを持つすべての要素をHTMLCollectionとして取得する。

querySelector("セレクタ")

CSSセレクタを指定して、最初に見つかった要素1つを返す。

querySelectorAll("セレクタ")

CSSセレクタに合致するすべての要素をNodeListとして取得する。

もし「IDを手掛かりに要素を一意に特定したい」という明確な理由があれば、getElementByIdは非常に直感的でわかりやすい方法です。
一方で、「特定のクラスを持つ要素をまとめて扱いたい」場合などは、別のメソッドのほうが適しているでしょう。

また、querySelectorやquerySelectorAllのようにCSSセレクタを使う方法は、単純なID検索だけでなく、ネスト構造や属性を含むセレクタが使えるため、より柔軟です。
ただし、初心者の段階では、まずgetElementByIdを使いこなし、DOM操作の基本をつかむのがおすすめです。
後々、必要になったタイミングで他のメソッドを使う、という順序のほうが理解しやすいかもしれません。

DOM要素を取得する方法は複数ありますが、実際の開発現場ではID、クラス、タグ名、CSSセレクタなどを使い分けます。
適切にメソッドを選ぶことで、コードの可読性や拡張性が向上します。

実務で活用するシーン

実務の現場では、単に要素を取得して内容を表示するだけでなく、多様な操作を組み合わせる必要があります。
代表的な例のひとつにフォーム操作があります。
ユーザーの入力内容に基づいて表示を切り替えたり、バリデーション（入力チェック）を行うことが多いため、getElementByIdでフォーム要素を取得し、値や状態を随時チェックするのです。

たとえば、ログインフォームをイメージしてみてください。
ユーザー名とパスワードの両方が入力されていればログインボタンを有効にする、もしくはエラーがある場合に画面に赤文字を表示するといった処理は、現場ではよくあるシナリオでしょう。
こうした機能を実装する際、document.getElementById("username")やdocument.getElementById("password")などで要素を取得し、イベントリスナーを通じて入力を検知して画面を更新するわけです。

また、テーブルやリストの動的な生成・更新にも使われます。
サーバーから取得したデータを画面上に整形して表示するような場面では、必要な場所に<tr>や<li>要素を足したり削除したりします。
そのときに「どのテーブルを更新するのか」「どのリストを更新するのか」を特定するために、まずgetElementByIdを活用します。

さらに、複雑なUIを構築する際には、描画ライブラリやフレームワークを使うことも多いですが、基本のDOM操作としてgetElementByIdを理解しておくことは欠かせません。
ライブラリを使わない素のJavaScriptで仕組みを把握しておくと、トラブルが起きたときにデバッグしやすくなるので、実務での総合的なスキルアップにつながるでしょう。

コード例：フォーム入力をリアルタイムに反映する

ここでは、簡単なフォーム入力をリアルタイムに別の要素に反映してみます。
入力欄に文字を打ち込むと、すぐ下に入力内容が表示されるイメージです。

HTMLは次のように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーム入力リアルタイム反映</title>
</head>
<body>
  <input type="text" id="nameInput" placeholder="お名前を入力" />
  <div id="displayArea">ここに入力内容が表示されます</div>

  <script src="script.js"></script>
</body>
</html>

JavaScriptファイル（script.js）の内容を以下に示します。

const nameInput = document.getElementById("nameInput");
const displayArea = document.getElementById("displayArea");

// 入力欄の内容が変化したときにイベントが発生
nameInput.addEventListener("input", () => {
  displayArea.textContent = nameInput.value;
});

ここで注目すべきは、HTMLの読み込みが終わった段階でdocument.getElementById("nameInput")とdocument.getElementById("displayArea")を取得している点です。
ユーザーがテキストを入力するたびにinputイベントがトリガーされ、そのときに入力値がdisplayAreaに反映されます。

この例ではテキストをそのまま反映していますが、実際の開発では入力内容に応じて警告メッセージを出したり、文字数制限を超えたらエラー表示をしたりすることも多いです。
そうした機能のカスタマイズも、まず要素を取得して値を取得するという基本のフローを踏まえてこそスムーズになります。

コード例：動的に要素を追加するサンプル

次は、getElementByIdで取得したコンテナ要素に新たな子要素を追加する例を見てみましょう。
ボタンを押すと、新しい<p>要素が生成されてコンテナに挿入されるようなイメージです。

HTMLを以下のように用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素の動的追加</title>
</head>
<body>
  <button id="addButton">テキストを追加</button>
  <div id="container"></div>

  <script src="script.js"></script>
</body>
</html>

JavaScript側のコードは、次のようになります。

const addButton = document.getElementById("addButton");
const container = document.getElementById("container");

addButton.addEventListener("click", () => {
  const newParagraph = document.createElement("p");
  newParagraph.textContent = "新しいテキストを追加しました。";
  container.appendChild(newParagraph);
});

この例では、ボタンをクリックするたびにdocument.createElement("p")で新しい段落要素を生成し、それをappendChildメソッドでcontainerに追加しています。
これにより、ユーザーの操作に応じて画面内容を動的に変えられるのです。

実務では、これを応用してリストやテーブル、あるいは画像ギャラリーなどを生成していきます。
必要に応じてクラスを付与してスタイルを当てたり、クリックイベントをさらに仕込んだりすることで、より複雑なUIも実装できます。

createElementやappendChildなどのDOM操作は、要素を大量に追加・削除するケースではパフォーマンスに影響が出ることがあります。
場合によっては一度に複数の要素をまとめて生成してから挿入するなどの工夫が必要になるでしょう。

よくあるトラブルと注意点

getElementByIdを使って開発していると、いくつかありがちなトラブルに遭遇することがあります。
まずは、IDの重複です。
HTMLではid属性は固有の名前として使うのが原則ですが、複数の要素に同じidをつけてしまうことがまれにあります。
このような場合でもgetElementByIdは最初に見つかった要素だけを返すため、意図しない要素が取得される原因となります。

次に、要素が存在しない場合はnullが返る点です。
スペルミスやタイミングの問題で該当要素が見つからないと、コード上でエラーが起きる可能性があります。
たとえばnull.styleのようにアクセスしようとすると、TypeErrorが発生します。
こうした状況を回避するために、要素を取得したあとif (element) { ... }でチェックする癖をつけるのも有効です。

また、HTML文書の読み込みが終わっていない段階でgetElementByIdを呼び出し、nullが返ってしまうケースも初心者の方が最初によくつまずくポイントです。
これを避けるためには、スクリプトを読み込むタイミングを調整したり、DOMContentLoadedイベントを活用したりするのが一般的な対策になります。

他にも、CSSフレームワークなどを使っていて、画面を動的に生成する部分と静的に書かれた部分が混ざった場合、想定したIDがいつ生成されるのか把握しきれなくなる場合があります。
このような仕組みを扱うときは、開発ツールの「要素検証」で実際のDOM構造を確認するクセをつけるといいでしょう。

活用の幅をさらに広げるために

getElementByIdは単体でも十分に便利ですが、しっかりとDOMの階層構造や、他のメソッドとの組み合わせを理解すると、さらに多彩な操作が可能になります。

たとえば、ある親要素をIDで取得し、その直下にある特定のクラスを持った要素だけをさらにquerySelectorAllで取得するなど、段階的に要素をしぼり込む方法があります。
これは大規模な画面構造や、動的に生成される要素の管理でも役立つテクニックです。

また、単なるテキストやスタイル変更だけでなく、アニメーションライブラリと組み合わせることで視覚効果を与えたり、アクセシビリティを高めるためにARIA属性を動的に変更するといった使い方もあります。
実務ではUI/UXの向上やユーザーエクスペリエンス向上を目的に、こうした工夫をたくさん行います。

フレームワーク（ReactやVueなど）を使うと、HTMLの直接的な操作を意識しなくても画面を更新できますが、それらの裏側では結局DOMが操作されています。
getElementByIdやDOM操作を理解しておくことは、フレームワークを正しく使いこなすためにも大切な基礎力となるでしょう。

もし複数の場所で同じような処理を行う場合は、関数化して再利用するという方法も検討してください。
たとえば「IDを受け取って、内容をクリアする」処理や「IDを受け取って、表示を切り替える」といった処理をまとめておけば、コードの保守性が格段に上がります。

まとめ

今回は、JavaScriptのgetElementByIdについて、基礎的な概念から実務での応用までを解説しました。
WebページのDOM構造の中から要素を特定し、それに対してテキストやスタイルを変更したり、イベントを設定したりできるのが、このメソッドの最大の強みです。

特に、以下のポイントを押さえておくと良いでしょう。

  • getElementById("要素のID")で、該当する単一の要素を取得できる
  • 該当する要素がない場合はnullが返るため、使用時は注意が必要
  • フォーム操作やイベントハンドリング、リストやテーブルの動的生成などに幅広く活用できる
  • DOMが読み込まれるタイミングに注意し、実装の順序を適切に管理する必要がある
  • 他の取得メソッド（querySelectorやgetElementsByClassNameなど）と組み合わせて使う場面も多い

実務では、idの設計や、どのタイミングで要素を操作するかといった点にも気を配ります。
複数のメソッドを上手に使い分け、可読性の高いコードを書けるようになると、より大規模なプロジェクトでも対応しやすくなります。

最初は小さなサンプルコードから始めて、やがてフォームやリストの動的生成など徐々に応用的な機能を足していくのがおすすめです。
ぜひ、皆さんも自分のサイトや実習用のページで試しながら、JavaScriptのDOM操作に慣れていきましょう。
これらの知識はフレームワークを使う際にも役立ち、よりスムーズな開発が可能になるはずです。
今後もさまざまなメソッドやイベント処理を学びながら、JavaScriptでのWeb開発を楽しんでください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説