JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのgetElementByIdメソッドの仕組みと使い方を徹底解説

getElementByIdとは

getElementById()は、指定した値と一致するID属性を持つ要素を取得して返すDOMメソッドです。HTML DOMにおける最も基本かつ頻繁に使われるメソッドのひとつであり、ページ上の要素を操作したいほぼすべての場面で活用されます。

このメソッドの主な特徴は以下の通りです。

  • 指定したIDを持つ要素が存在しない場合、nullを返します。
  • IDは1つのページ内で一意（ユニーク）である必要があります。
  • 同じIDを持つ要素が複数存在した場合は、ドキュメント内で最初に見つかった要素が返されます。
  • 要素の内部テキストやHTMLにアクセスするには、.innerHTMLプロパティと組み合わせて使用します。

例1：要素のテキストを取得する

次の例では、「GetElementById」というテキストを持ち、id属性が「element」に設定されたpタグが定義されています。document.getElementById()でこの段落要素を取得し、innerHTML経由で内部のテキストを読み取って出力しています。innerHTMLを使わない限り、getElementByIdだけではタグの内部テキストを取得できない点に注意してください。

<html>
<body>
<p id="element">GetElementById</p>
<script>
   var s = document.getElementById("element").innerHTML;
   document.write(s);
</script>
</body>
</html>

実行結果

GetElementById
GetElementById

例2：要素のテキストを書き換える

次の例では、getElementByIdを使って元のテキスト「GetElementById」を「Tutorix」に置き換えています。innerHTMLに新しい値を代入することで、ページ表示後の内容も動的に変更できます。

<html>
<body>
<p id="element">GetElementById</p>
<script>
    document.getElementById("element").innerHTML = "Tutorix";
</script>
</body>
</html>

実行結果

Tutorix

まとめ

getElementByIdは、IDを手がかりに特定の要素へ高速かつ確実にアクセスできるJavaScriptの基本メソッドです。テキストの読み取りから書き換えまで対応でき、DOM操作の出発点として必ず押さえておきたいAPIといえます。

  1. JavaScriptで要素が非表示になっているかどうかを確認する方法

    Webページの開発では、特定の要素が現在非表示になっているかどうか（display: none が適用されているか）を判定したい場面がよくあります。JavaScriptでこれを実現するには、window.getComputedStyle() メソッドを使うのが一般的です。このメソッドは、CSSスタイルシートで設定された実際の表示状態を取得できるため、確実に非表示状態をチェックできます。 実装例 以下は、ボタンをクリックすると非表示になっているDIV要素を表示するサンプルコードです。クリック時には、まず getComputedStyle() で要素が「none」になっているかどうかを確認してから

  2. JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方

    JavaScriptで配列の中から特定の要素を検索したい場面は非常に多くあります。本記事では、最もよく使われるfind()メソッドを中心に、実際に動作するサンプルコードとともに分かりやすく解説します。 find()メソッドとは find()メソッドは、配列の各要素に対して指定したテスト関数（コールバック関数）を実行し、条件を満たした最初の要素の値を返します。条件に一致する要素が存在しない場合は undefined を返します。 基本構文 arr.find(callback(element[, index[, array]])[, thisArg]) callback: 各要素をテストする関数