JavaScriptの「getElementById」を使ってHTML要素をid値をキーに素早く取得する方法について解説します。
HTML要素をid値で取得することってできますか？
「getElementById」を使えば、id値をキーにHTML要素を素早く取得することができます。
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」要素に表示されるテキストが更新されます。
「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」の中身を変更する処理を行っています。
リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
この記事のまとめ
「getElementById」を使ってHTML要素をid値をキーに取得する方法について解説しました。
- getElementByIdメソッドを使えば、HTMLドキュメント内の指定したID値を持つ要素を取得することができます。
- getElementByIdメソッドは、指定したID値が見つからない場合にはnullを返します。
- getElementByIdメソッドを使うと、HTMLドキュメント内の指定した要素を簡単に取得し、操作することができます。
getElementByIdメソッドは、JavaScriptでHTMLドキュメントを操作する上で、非常に便利なメソッドですね！
getElementByIdメソッドを使うことで、HTMLドキュメント内の要素を簡単に操作することができます。また、ID値はページ内で一意であることが求められますので、正確なID値を指定するよう心がけてください。
コメント