注目キーワード

【JavaScript入門】getElementByIdの使い方をわかりやすく徹底解説

  • 2025.01.31
       
【JavaScript入門】getElementByIdの使い方を解説

JavaScriptでHTMLを操作する方法のうち最も基本的なものに「getElementById」という、HTML要素を取得するメソッドがあります。getElementByIdを使用することで取得した要素の内容やスタイルを変更するのが容易になるなど、役立つ場面は多々あります。本記事では、JavaScript学習者向けにgetElementByIdの使い方をソースコードを用いて解説します。

目次

getElementByIdとは

getElementByIdとは、HTML内のタグにid属性で指定した値を持つHTML要素を取得するメソッドです。任意の要素を抽出して、HTMLを書き換えたりスタイルを変更するといったことができます。要素のid属性は常に”一意である”（複数読み取れる状態にならない）ことが求められるので、特定の要素に素早くアクセスする場合に有効です。

IDに関するルール

IDはHTML要素に付けられた識別子（identifier）のことであり、同一HTML内で重複してはならず、一意な値である必要があります。また、getElementByIdメソッドで取得できる要素は一つであるため、複数の要素が同じIDを持つ場合（同一HTML内で重複IDが存在する）は、最初に一致した要素だけを返します。また、指定したIDが存在しない場合はNULL値を返します。

id属性を持たない要素にアクセスする場合は、querySelector()メソッドを使うことで任意のセレクタで要素を検索できます。

あなたのご希望に沿った案件が必ず見つかります
【フリーランス向け】高収入・好待遇の案件をご紹介

TECH MANIA フリーランス

≫まずは簡単60秒で無料お問い合わせから≪

【使用イメージ】

document.getElementById(id)

「getElementById」を「getElementByID」としてしまうと、メソッドとして機能しないので注意が必要です。

【引数】

引数には取得したい要素のID値を記述します。なお、ID値の文字列は大文字と小文字とで区別されます。

（例）’example’

【戻り値】

ID値（id属性で指定された文字列）に一致する要素を返します。HTML内に一致する要素がない場合はNULL値を返します。

getElementByIdの使い方

【例1】要素を取得する

段落タグをIDで要素を取得し、JavaScriptコンソールに表示させます。

【実行コード】

<html>
<body>
    <p id="sample">こんにちは</p>
    <script>
        console.log(document.getElementById("sample"));
    </script>
</body>
</html>

【実行結果】

<p id=”sample”>こんにちは</p>

ブラウザでHTMLファイルを開き、検証モードを立ち上げて「コンソール」のタブをクリックすると上のようにHTML要素が表示されます。

ちなみに、JavaScriptで変数に代入する場合は次のように記述します。

【基本構文】

// あとから変数に別の値を代入する可能性がある場合
let 変数名 = document.getElementById(id値);

// 値を変更しないことが最初から分かっている場合
const 変数名 = document.getElementById(id値);

【例2】要素のテキスト部分を取得する

段落タグをIDで要素を取得し、textContentプロパティで要素の中身であるテキスト部分をJavaScriptコンソールに表示させます。

【実行コード】

<html>
 <body>
  <p id="sample">こんにちは</p>
  <script>
  console.log(document.getElementById("sample").textContent);
  </script>
 </body>
</html>

【実行結果】

こんにちは

【例3】変数でIDを指定する

引数を文字列ではなく、変数で指定します。

【実行コード】

<html>
<body>
    <p id="sample">こんにちは</p>
    <script>
        let id = "sample";
        console.log(document.getElementById(id));
    </script>
</body>
</html>

【実行結果】

<p id=”sample”>こんにちは</p>

変数「id」に段落タグのID名「sample」が格納されています。そのため、変数をgetElementByIdの引数に指定することで段落タグ要素が表示されます。

【例4】要素の中身を変更する

innerHTMLプロパティを使用することで要素の中身を変更できます。

【実行コード】

<html>
<body>
    <p id="sample">こんにちは</p>
    <input type="button" value="クリック" onclick="fnc()">
    <script>
        const smp = document.getElementById("sample");
        function fnc() {
            smp.innerHTML = "こんばんは";
        }
    </script>
</body>
<html>

【実行結果】

ボタンをクリックすると段落タグ内の文字列が変更されます。

こんにちは

【例5】valueの値を取得する

valueプロパティを使うことでvalue属性で指定した値を取得できます。

ボタンに書かれた文字を取得してみましょう。

【実行コード】

<html>
 <body>
  <p>クリックしましょう</p>
  <input type="button" id="sample" value="クリック">
  <script>
  console.log(document.getElementById("sample").value);
  </script>
 </body>
</html>

【実行結果】

クリック

【例6】イベントハンドラーを結びつける

getElementByIdで取得した要素に、イベントハンドラーを結びつけることも可能です。たとえば、ボタンをクリックすると、特定の関数を発動する仕組みなどを作成できます。

ボタンの文字列が変わるようにします。

【実行コード】

<html>
 <body>
  <p>クリックしましょう</p>
  <input type="button" id="sample" value="クリック">
  <script>
   let btn = document.getElementById("sample");
   function fnc() {
    btn.value = "　済　";
   }
   btn.setAttribute("onclick", "fnc()");
  </script>
 </body>
</html>

【実行結果】

ボタンをクリックするとボタンに書かれた文字が変更されます。

【応用編】addEventListenerメソッドでイベントリスナーを追加する場合

htmlの要素にonclick属性などのイベントハンドラー属性を付与する方法以外に、JavaScript側でイベントに応じて関数を実行する処理を追加することも可能です。

onclick属性を使う場合より少しコードの記述量が増えるので難易度が上がりますが、安全にスクリプトを動作させるならこちらを使いましょう。

【基本構文】

オブジェクト.addEventListener(イベント名, リスナー)

イベント名は “click” や “load” など、イベント名がダブルクォーテーションで囲まれた文字列が入ります。リスナーは関数やオブジェクトのメソッドが入ります。

実際に、上の例をこの方法で実装してみましょう。（<html>などのタグは省略しています）

ここではリセットボタンも追加していますので、JavaScriptの処理が実行される様子を何度でも確認することができます。

【サンプルコード】

<body>
  <p>"クリック"ボタンを押すと文字が変更されます。<br>"リセット"ボタンを押すと文字が元に戻ります。</p>
  <input type="button" id="sample" value="クリック">
  <input type="button" id="reset" value="リセット">
  <script>
  const sample = document.getElementById("sample");
  const reset = document.getElementById("reset");
  sample.addEventListener("click", () => {sample.value = "済"});
  reset.addEventListener("click", () => {sample.value = "クリック"});
  </script>
</body>

【実行結果】

“クリック”ボタンを押すと文字が変更されます。
“リセット”ボタンを押すと文字が元に戻ります。

【例7】スタイルを変更する

styleプロパティを使うことでテキストの色やサイズを変更できます。

【実行コード】

<html>
<body>
    <p id="sample">こんにちは</p>
    <button onclick="myFunction()">クリック</button>
    <script>
        let smp = document.getElementById("sample");
        function myFunction() {
            smp.style.color = "red";
        }
    </script>
</body>
</html>

【実行結果】

“クリック”ボタンをクリックするとテキストの色が変更されます。また、”リセット”ボタンを押すと元に戻ります。

リセットボタンの部分はサンプルには記述していません。これまで解説してきた内容を確認しながら、自分で処理を追加してみましょう！

こんにちは

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。

     

Otherカテゴリの最新記事