読み込み中...

JavaScriptでgetElementByIdを使った要素の取得方法10選

JavaScriptでgetElementByIdを使ってHTML要素の取得 JS
この記事は約20分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●getElementByIdとは

JavaScriptを学び始めたばかりの頃、HTML要素の操作に戸惑った経験はありませんか？

そんな時に役立つのが、getElementById関数です。

getElementByIdは、その名の通りIDを指定してHTML要素を取得するメソッドです。

JavaScriptでDOM操作を行う際には欠かせない機能の1つと言えるでしょう。

IDはHTML要素に固有の識別子を付与するために使用されます。

1つのページ内で同じIDを複数の要素に指定することはできません。

そのため、getElementByIdを使えば目的の要素を簡単に特定できるのです。

初心者のうちは、getElementByIdの存在を知らずに、要素の取得に苦労している人も多いのではないでしょうか。

でも、ご安心ください。

この記事では、getElementByIdの基本的な使い方から、実践的なサンプルコードまで丁寧に解説していきます。

これを機に、JavaScriptでのDOM操作に自信を持ってチャレンジしてみましょう！

○getElementByIdの基本的な使い方

getElementByIdの基本的な使い方は至ってシンプルです。

まずは、HTML側で要素にIDを指定します。

<div id="myElement">こんにちは</div>

次に、JavaScript側でgetElementByIdを使ってその要素を取得します。

const element = document.getElementById('myElement');

これだけです！取得した要素は、定数や変数に代入して使用します。

実際の開発では、この要素に対して様々な操作を行うことになるでしょう。

たとえば、要素のテキストを変更したい場合は、textContentやinnerHTMLプロパティを使用します。

○サンプルコード1：要素のテキストを変更する

<div id="greeting">こんにちは</div>
// 要素を取得
const greetingElement = document.getElementById('greeting');

// テキストを変更
greetingElement.textContent = 'こんばんは';

実行結果

<div id="greeting">こんばんは</div>

見た目のデザインを変更したい時は、styleプロパティを使ってCSSを適用できます。

○サンプルコード2：要素のスタイルを変更する

<div id="colorfulText">カラフルなテキスト</div>
// 要素を取得
const textElement = document.getElementById('colorfulText');

// スタイルを変更
textElement.style.color = 'red';
textElement.style.fontSize = '24px';
textElement.style.fontWeight = 'bold';

実行結果

<div id="colorfulText" style="color: red; font-size: 24px; font-weight: bold;">カラフルなテキスト</div>

このように、getElementByIdで要素を取得すれば、その要素に対して自由に操作を加えられるのです。

●getElementByIdとquerySelectorの違い

getElementByIdを使ってHTML要素を取得する方法は分かりましたね。

でも、実はこれと似たような機能を持つメソッドがあるんです。それが、querySelectorです。

初心者の頃は、getElementByIdとquerySelectorの違いがよく分からなくて混乱してしまうこともあるでしょう。

ですが、それぞれの特徴を理解しておくことは、より効率的なコーディングにつながります。

では、この2つのメソッドの違いを見ていきましょう。

getElementByIdはIDを指定して要素を取得するのに対し、querySelectorはCSSセレクタを使って要素を取得します。

つまり、IDだけでなく、クラス名やタグ名などを使って、より柔軟に要素を特定できるのです。

例えば、こんなHTMLがあったとします。

<div id="myElement" class="box">
  <p>こんにちは</p>
</div>

この場合、getElementByIdでは次のようにIDを指定して要素を取得します。

const element = document.getElementById('myElement');

一方、querySelectorでは、CSSセレクタを使って要素を取得できます。

○サンプルコード3：querySelectorを使った要素の取得

// IDを指定して取得
const elementById = document.querySelector('#myElement');

// クラス名を指定して取得
const elementByClass = document.querySelector('.box');

// タグ名を指定して取得
const elementByTagName = document.querySelector('div');

// 複数の条件を指定して取得
const elementByMultipleConditions = document.querySelector('div.box p');

実行結果

// elementByIdはID「myElement」を持つ要素を取得
// elementByClassはクラス名「box」を持つ要素を取得
// elementByTagNameは最初の<div>要素を取得
// elementByMultipleConditionsは<div class="box">の中にある最初の<p>要素を取得

このように、querySelectorを使えば、CSSセレクタを使ってさまざまな条件で要素を取得できます。

これは、getElementByIdよりも柔軟性が高いと言えるでしょう。

ただし、パフォーマンスの面ではgetElementByIdの方が優れています。

○パフォーマンスの比較

getElementByIdは、IDによる高速な検索が可能です。

一方、querySelectorはCSSセレクタを使って要素を探すため、getElementByIdよりも処理に時間がかかります。

特に、大規模なWebサイトを開発する際は、このパフォーマンスの差が影響してくるかもしれません。

そのため、IDで取得できる要素に関しては、できるだけgetElementByIdを使うのが賢明だと言えます。

とはいえ、初心者のうちはあまりパフォーマンスのことを気にする必要はありません。

むしろ、querySelectorを使って、CSSセレクタへの理解を深めておくことをおすすめします。

実際の開発現場でも、querySelectorを使うシーンは少なくないですからね。

getElementByIdにしろ、querySelectorにしろ、どちらもDOM操作には欠かせない機能です。

サンプルコードを参考に、両方の使い方をマスターしておきましょう。

●getElementByIdを使う際の注意点

getElementByIdは便利な機能ですが、使う際にはいくつか注意点があります。

初心者のうちは、つい見落としがちなポイントですが、しっかりと理解しておくことが大切ですよ。

まずは、存在しないIDを指定した場合について考えてみましょう。

○サンプルコード4：存在しないIDを指定した場合

<div id="myElement">こんにちは</div>
// 存在しないIDを指定
const element = document.getElementById('nonExistentId');
console.log(element);

実行結果

null

ご覧の通り、存在しないIDを指定すると、getElementByIdはnullを返します。

nullはJavaScriptにおける特別な値で、「値が存在しない」ことを表します。

このようなケースでは、nullに対して操作を行おうとするとエラーが発生してしまいます。

例えば、nullに対してテキストを設定しようとすると、以下のようなエラーが発生します。

const element = document.getElementById('nonExistentId');
element.textContent = 'こんばんは';  // エラー発生！

エラーメッセージ

Uncaught TypeError: Cannot set properties of null (setting 'textContent')

このエラーは、「nullのプロパティを設定できない」という意味です。

つまり、存在しない要素に対して操作を行おうとしたために発生したエラーなのです。

こうしたエラーを避けるためには、getElementByIdで要素を取得する前に、nullチェックを行うのが一般的です。

次のようなコードを書くことで、エラーを未然に防ぐことができます。

const element = document.getElementById('nonExistentId');
if (element !== null) {
  // 要素が存在する場合の処理
  element.textContent = 'こんばんは';
}

このように、getElementByIdを使う際は、常に「要素が存在しない可能性がある」ということを意識しておく必要があります。

nullチェックを怠ると、思わぬエラーに遭遇することになるかもしれませんよ。

次に、複数の要素に同じIDを指定した場合について見ていきましょう。

○サンプルコード5：複数の要素に同じIDを指定した場合

<div id="myElement">こんにちは</div>
<div id="myElement">こんばんは</div>
const element = document.getElementById('myElement');
console.log(element.textContent);

実行結果

こんにちは

このように、複数の要素に同じIDを指定した場合、getElementByIdは最初に見つかった要素だけを返します。

2つ目以降の要素は無視されてしまうのです。

一般に、HTMLではIDの重複は避けるべきとされています。

IDはページ内で一意であることが期待されているからです。

もし、IDの重複が必要な場合は、クラス名を使うのが適切でしょう。

getElementByIdを使う際は、IDの重複にも注意が必要です。

意図しない動作の原因になることがありますからね。

●getElementByIdを使ったよくあるエラーと対処法

getElementByIdを使っていると、時々エラーに遭遇することがあります。

初心者のうちは、エラーメッセージを見ても何が原因なのかわからず、途方に暮れてしまうこともあるでしょう。

でも、大丈夫です。エラーは成長のチャンスです。

よくあるエラーとその対処法を知っておけば、問題解決の糸口が見えてきますよ。

JavaScriptでは、エラーメッセージを読むことが非常に重要です。

エラーメッセージには、問題の原因や発生箇所に関する情報が含まれているからです。

getElementByIdに関連するエラーの中でも、特によく見かけるのが以下の2つです。

○Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML’)

このエラーは、nullに対してinnerHTMLを設定しようとした時に発生します。

例えば、次のようなコードを実行すると、このエラーが発生します。

<div id="myElement">こんにちは</div>
const element = document.getElementById('nonExistentId');
element.innerHTML = 'こんばんは';  // エラー発生！

このコードでは、nonExistentIdという存在しないIDを指定しています。

その結果、getElementByIdはnullを返します。

そのnullに対してinnerHTMLを設定しようとしているため、エラーが発生するのです。

この問題を解決するには、先ほども触れたようにnullチェックを行います。

const element = document.getElementById('nonExistentId');
if (element !== null) {
  element.innerHTML = 'こんばんは';
}

このように書くことで、要素が存在する場合にのみinnerHTMLが設定されるようになります。

○Uncaught TypeError: Cannot read properties of null (reading ‘style’)

このエラーは、nullに対してstyleプロパティを読み取ろうとした時に発生します。

次のコードを見てみましょう。

<div id="myElement">こんにちは</div>
const element = document.getElementById('nonExistentId');
console.log(element.style.color);  // エラー発生！

ここでも、存在しないIDを指定しているため、getElementByIdがnullを返しています。

そのnullのstyleプロパティを読み取ろうとしているので、エラーが発生します。

この問題の解決方法は、先ほどと同じくnullチェックです。

const element = document.getElementById('nonExistentId');
if (element !== null) {
  console.log(element.style.color);
}

エラーが発生しそうな処理の前に、必ずnullチェックを行うようにしましょう。

○IDの重複に注意する

これは厳密にはエラーではありませんが、getElementByIdを使う際に注意すべきポイントの1つです。

先ほども触れたように、IDは一意であることが期待されています。

もし、同じIDを複数の要素に指定した場合、getElementByIdは最初に見つかった要素だけを返します。

これは、意図しない動作を引き起こす可能性があります。

IDの重複は避け、必要な場合はクラス名を使うようにしましょう。

●getElementByIdの応用例

さて、ここまでgetElementByIdの基本的な使い方から注意点、エラー対処法まで解説してきました。

JavaScriptを使ったDOM操作にだいぶ慣れてきたのではないでしょうか。

でも、本当の実力が問われるのはこれからです。

getElementByIdを実際のWebサイト制作で活用できるようになって初めて、JavaScriptの理解が深まったと言えるでしょう。

そこで、この章では、getElementByIdの応用例をいくつか紹介します。

実践的なサンプルコードを通して、getElementByIdの使い方をマスターしていきましょう。

○サンプルコード6：フォームの入力値を取得する

Webサイトではフォームを使った入力が欠かせません。

getElementByIdを使えば、フォームの入力値を簡単に取得できます。

<input type="text" id="nameInput">
<button id="submitButton">送信</button>
const nameInput = document.getElementById('nameInput');
const submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', () => {
  const name = nameInput.value;
  console.log(`こんにちは、${name}さん！`);
});

実行結果

// 入力欄に「太郎」と入力して送信ボタンをクリックすると、
// コンソールに「こんにちは、太郎さん！」と表示される

このコードでは、テキスト入力欄とボタンをgetElementByIdで取得しています。

そして、ボタンがクリックされた時に、テキスト入力欄の値（value）を取得し、コンソールに挨拶文を表示しています。

フォームの入力値を取得することで、ユーザーからのデータを処理できるようになります。

これは、動的なWebサイトを作る上で非常に重要なスキルです。

○サンプルコード7：ボタンクリックでテキストを変更する

次は、ボタンのクリックイベントを使って、要素のテキストを変更する例です。

<p id="greeting">こんにちは</p>
<button id="changeButton">変更</button>
const greeting = document.getElementById('greeting');
const changeButton = document.getElementById('changeButton');

changeButton.addEventListener('click', () => {
  greeting.textContent = 'こんばんは';
});

実行結果：

// 初期状態：<p id="greeting">こんにちは</p>
// 変更ボタンをクリック後：<p id="greeting">こんばんは</p>

ここでは、<p>要素とボタンをgetElementByIdで取得し、ボタンがクリックされた時に、<p>要素のテキストを「こんばんは」に変更しています。

このように、getElementByIdとイベントリスナーを組み合わせることで、インタラクティブなWebサイトを作ることができます。

ユーザーのアクションに応じて、ページの内容を動的に変化させられるのです。

○サンプルコード8：要素の表示/非表示を切り替える

Webサイトでは、ある条件に応じて要素を表示したり隠したりすることがよくあります。

getElementByIdを使えば、この処理も簡単に実装できます。

<div id="box">このボックスは最初は非表示です。</div>
<button id="toggleButton">表示/非表示の切り替え</button>
#box {
  display: none;
}
const box = document.getElementById('box');
const toggleButton = document.getElementById('toggleButton');

toggleButton.addEventListener('click', () => {
  if (box.style.display === 'none') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

実行結果

// 初期状態：ボックスは非表示
// 切り替えボタンをクリック：ボックスが表示される
// もう一度切り替えボタンをクリック：ボックスが非表示になる

このサンプルでは、最初はCSSでボックスを非表示にしています。

そして、JavaScriptでボックスと切り替えボタンを取得し、ボタンがクリックされる度にボックスの表示/非表示を切り替えています。

要素の表示/非表示の切り替えは、アコーディオンメニューやモーダルウィンドウなどを作る際に頻繁に使われるテクニックです。

ぜひ、習得しておきましょう。

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

getElementByIdを使えば、JavaScriptから動的に要素を追加することもできます。

これは、ユーザーのアクションに応じてページの内容を変化させる際に役立ちます。

<ul id="list"></ul>
<input type="text" id="itemInput">
<button id="addButton">追加</button>
const list = document.getElementById('list');
const itemInput = document.getElementById('itemInput');
const addButton = document.getElementById('addButton');

addButton.addEventListener('click', () => {
  const item = itemInput.value;
  const listItem = document.createElement('li');
  listItem.textContent = item;
  list.appendChild(listItem);
  itemInput.value = '';
});

実行結果：

// 初期状態：<ul id="list"></ul>
// 入力欄に「りんご」と入力して追加ボタンをクリック：<ul id="list"><li>りんご</li></ul>
// 入力欄に「バナナ」と入力して追加ボタンをクリック：<ul id="list"><li>りんご</li><li>バナナ</li></ul>

このコードでは、リスト(<ul>)、テキスト入力欄、追加ボタンをgetElementByIdで取得しています。

そして、追加ボタンがクリックされた時に、次の処理を行っています。

  1. テキスト入力欄の値を取得
  2. 新しい<li>要素を作成
  3. <li>要素のテキストに入力値を設定
  4. <ul>要素の子要素として<li>要素を追加
  5. テキスト入力欄を空にする

このように、getElementByIdとcreateElementを組み合わせることで、動的にページの内容を変更できます。

これは、TODOリストやショッピングカートなどを作る際に役立つテクニックです。

○サンプルコード10：ページ読み込み時に処理を実行する

最後に、ページの読み込み時に処理を実行する方法を見てみましょう。これは、ページが表示された時点で何らかの初期化処理を行いたい場合に便利です。

<p id="message"></p>
document.addEventListener('DOMContentLoaded', () => {
  const message = document.getElementById('message');
  message.textContent = 'ページが読み込まれました！';
});

実行結果

// ページ読み込み時：<p id="message">ページが読み込まれました！</p>

ここでは、document.addEventListenerを使って、DOMContentLoadedイベントにイベントリスナーを登録しています。

このイベントは、HTMLの解析が完了し、DOMツリーが構築された時点で発火します。

イベントリスナーの中で、getElementByIdを使って<p>要素を取得し、そのテキストを設定しています。

こうすることで、ページが読み込まれた時点で、自動的に「ページが読み込まれました！」というメッセージが表示されます。

まとめ

JavaScriptのgetElementByIdは、HTML要素をIDで取得するための強力なメソッドです。

基本的な使い方から応用例まで、様々なシーンで活躍してくれます。

初めはエラーに悩まされることもあるかもしれません。

でも、エラーメッセージをしっかりと読み、nullチェックを怠らないようにすれば、問題はすぐに解決できるはずです。

getElementByIdを使いこなすコツは、実践あるのみ。

サンプルコードを参考に、自分でコードを書いて動作を確認することが大切です。

うまくいかない時は、一度立ち止まって、コードを見直してみましょう。

きっと、問題の原因が見えてくるはずです。

初心者の頃は大変かもしれませんが、諦めずに頑張れば、必ず成長できます。