JavaScriptのgetElementByIdの使い方を徹底解説！初心者向け

JavaScriptでHTMLの要素を操作するためには、まず目的の要素を取得する必要があります。

その際によく使われるのが、getElementByIdメソッドです。

getElementByIdは、HTML内の特定のid属性を持つ要素を取得するメソッドで、JavaScriptからHTMLを操作する上で欠かせない存在です。

この記事では、JavaScriptのgetElementByIdメソッドについて以下の流れで詳しく解説します。

初心者にもわかりやすいよう、図解入りで丁寧に説明していくので、ぜひ最後までご覧ください！

この記事を書いた人

• 未経験からWebエンジニアとして転職成功（年収 30% アップ）
• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

getElementByIdの基本的な使い方

getElementByIdメソッドは、特定のidを持つ要素を取得するメソッドです。
idとは、HTML要素に付けられた識別子のことで、同一ページ内で一意であることが求められます。

基本的な構文は以下の通りです。

document.getElementById("id名");

引数には、取得したい要素のid名を文字列で指定します。
一致する要素が見つかった場合、その要素が返され、見つからなかった場合はnullが返されます。

getElementByIdの具体例

実際の使用例を見てみましょう。
以下のようなHTMLがあるとします。

<div id="myElement">
 <p>これは段落です。</p>
</div>

ここで、id名がmyElementのdiv要素をJavaScriptで取得するには、以下のようにします。

let element = document.getElementById("myElement");

これで、変数elementにはid名がmyElementのdiv要素が格納されます。
あとは、この変数を使ってさまざまな操作ができるというわけです。

idをコードで指定する

getElementByIdの引数はコードで動的に指定することもできます。
例えば、以下のようにid名を変数で表すことができます。

let id = "myElement";
let element = document.getElementById(id);

このように、id名を直接指定するのではなく、変数や式で表現することで、よりダイナミックなコードを書くことができるのです。

getElementByIdを使う際の注意点

getElementByIdを使う際には、いくつか注意すべき点があります。
ここでは2つの主要な注意点を説明します。

要素が見つからない場合はnullが返る

指定したidを持つ要素が存在しない場合、getElementByIdはnullを返します。
したがって、取得した要素を使う前にnullチェックを行うことが重要です。

let element = document.getElementById("myElement");
if (element !== null) {
   // 要素が見つかった場合の処理
} else {
   // 要素が見つからなかった場合の処理
}

このようにすることで、要素が存在しない場合のエラーを防ぐことができます。

同じidは使えない

前述の通り、idはHTML内で一意でなければなりません。
もし同じidを持つ要素が複数存在する場合、getElementByIdは最初に見つかった要素だけを返します。

<div id="myElement">要素1</div>
<div id="myElement">要素2</div>

このような場合、document.getElementById("myElement")は常に最初のdiv要素（要素1）を返します。
したがって、idの一意性を保つことが重要です。必要に応じてclassやdata属性を使い分けましょう。

getElementByIdのよくある活用シーン

getElementByIdは、JavaScriptからHTMLを操作する際の基本中の基本です。
ここでは、よくある活用シーンをいくつか紹介します。

要素の内容を変更する

getElementByIdで取得した要素の内容は、innerHTMLプロパティで変更できます。

let element = document.getElementById("myElement");
element.innerHTML = "新しい内容";

この例では、id名がmyElementの要素の内容を「新しい内容」に書き換えています。

フォームの値を取得・設定する

getElementByIdはフォーム要素の値の取得・設定にもよく使われます。
フォーム要素の値はvalueプロパティで取得・設定できます。

let inputElement = document.getElementById("myInput");
console.log(inputElement.value);  // 現在の値を取得
inputElement.value = "新しい値";  // 新しい値を設定

この例では、id名がmyInputのinput要素の値を取得し、その後新しい値を設定しています。

イベントリスナーを設定する

getElementByIdで取得した要素には、addEventListenerメソッドでイベントリスナーを設定できます。

let buttonElement = document.getElementById("myButton");
buttonElement.addEventListener("click", function() {
   alert("ボタンがクリックされました！");
});

この例では、id名がmyButtonのbutton要素にクリックイベントのリスナーを設定しています。
ボタンがクリックされると、アラートが表示されます。

スタイルを変更する

getElementByIdで取得した要素のスタイルは、styleプロパティで変更できます。

let element = document.getElementById("myElement");
element.style.color = "red";
element.style.fontSize = "20px";

この例では、id名がmyElementの要素の文字色を赤に、フォントサイズを20pxに変更しています。

まとめ

この記事では、JavaScriptのgetElementByIdメソッドについて詳しく解説しました。
要点をまとめると以下のようになります。

getElementByIdは、JavaScriptでDOM操作を行う上で非常に基本的かつ重要なメソッドです。
使い方をマスターすることで、よりインタラクティブなウェブページを作成することができるでしょう。

この記事が、皆さんのJavaScript学習の一助となれば幸いです。

JavaScriptを学ぶ際は、getElementByIdのようなDOM操作のメソッドを一つ一つ確実に理解していくことが大切です。最初は難しく感じるかもしれませんが、実際にコードを書いて試行錯誤を繰り返すことで、徐々に習得していけるはずです。

最後までお読みいただき、ありがとうございました。
ぜひこの記事で学んだgetElementByIdを実際のコーディングで活用し、JavaScriptの理解を深めていってくださいね！

JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！

この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。

そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？

JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。

おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。

現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！

Muscle Coding

JavaScriptを学べるおすすめプログラミングスクールを現役エンジニアが解説 | Muscle Coding JavaScriptを学べるプログラミングスクールの中でも特におすすめのスクールを現役エンジニアが詳しく解説します。料金、給付金、受講期間、サポート、チーム開発、など、各…