JavaScript　要素をid値で取得するgetElementByIdの使い方

JavaScriptの「getElementById」を使ってHTML要素をid値をキーに素早く取得する方法について解説します。

HTML要素をid値で取得することってできますか？

「getElementById」を使えば、id値をキーにHTML要素を素早く取得することができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

getElementByIdの使い方

　「getElementById」は、HTML文書から特定の要素を検索し、取得するためのメソッドです。このメソッドは、指定された「id」属性値をキーに、HTML文書内で要素を検索します。検索結果として見つかった最初の要素が戻り値となります。

このメソッドを使うことで、HTML上で定義されたid値を持つ要素をJavaScriptから操作することができます。「getElementById」を使うには、以下のように記述します。

var element = document.getElementById(“id名”);

「id名」にはHTML上で定義されたid値を指定します。これにより、id値が「id名」の要素を取得することができます。
また、getElementByIdメソッドは、指定したID値が見つからない場合にはnullを返します。

次のサンプルプログラムを見ていただくと、「getElementById」がどのように使用されるかがわかります。

<div id="target">ここにテキストが表示されます。</div>

const target = document.getElementById("target");
target.innerHTML = "新しいテキスト";

　上記のサンプルでは、「target」という「id」属性値を持つ「div」要素を検索し、取得しました。そして、取得した要素の「innerHTML」プロパティに新しいテキストを設定しています。

これにより、HTML文書内で「target」という「id」属性値を持つ「div」要素に表示されるテキストが更新されます。

CHECK

「getElementById」は「id」属性値がユニークであることが前提となります。「id」属性値が重複する場合、最初に見つかった要素だけが取得されます。このため、「id」属性値はユニークに設定するように注意する必要があります。

getElementByIdを使ったサンプルプログラム

「getElementById」を使ったサンプルプログラムを以下に示します。ボタンをクリックした際に、文字列を取得した要素に代入しています。

<!DOCTYPE html>
<html>
  <head>
    <script src="test.js"></script>
  </head>
  <body>
    <div id="myDiv">こんにちは！</div>
    <button id="myButton">要素を変更する</button>
  </body>
</html>

// 要素を取得する
var div = document.getElementById("myDiv");
var button = document.getElementById("myButton");

// ボタンをクリックした時の処理
button.addEventListener("click", function() {
  div.innerHTML = "Hello, World!";
});

このサンプルでは、HTML上に「myDiv」というid値を持つdiv要素と「myButton」というid値を持つボタン要素があります。

　JavaScript(test.js)では、「getElementById」を使ってこれらの要素を取得し、ボタンがクリックされた際に「myDiv」の中身を変更する処理を行っています。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。