このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Document: getElementById() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
getElementById() はDocument インターフェイスのメソッドで、id プロパティが指定された文字列に一致する要素を表すElement オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。
ID を持たない要素にアクセスする必要がある場合は、querySelector() で何らかのセレクターを使用して要素を検索することができます。
メモ:ID は文書内で固有である必要があります。単一の文書内で 2 つ以上の要素が同じ ID であった場合、このメソッドは最初に見つかった要素を返します。
構文
getElementById(id)メモ:メソッド名における"Id" の部分は、関数のコードに対して正しくなければなりません。getElementByID() は自然に見えるかもしれませんが、正しくなく動作しません。
引数
id探す要素の ID です。 ID は大文字と小文字の区別がある文字列で、文書内で固有です。指定された ID の要素は一つしかありません。
返値
指定された ID に一致する DOM 要素オブジェクトを記述したElement オブジェクト、または文書内に一致する要素がなければnull です。
例
HTML
<html lang="en"> <head> <title>getElementById の例</title> </head> <body> <p>いくらかのテキスト</p> <button>青</button> <button>赤</button> </body></html>JavaScript
function changeColor(newColor) { const elem = document.getElementById("para"); elem.style.color = newColor;}結果
使用上のメモ
Document.querySelector() やDocument.querySelectorAll() などの他の要素検索メソッドとは異なり、getElementById() はグローバルのdocument オブジェクトに対してのみ利用可能であり、 DOM のすべての要素オブジェクトのメソッドとしては利用できません。ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。
例
<!doctype html><html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div> <p>hello word1</p> <p>hello word2</p> <p>hello word3</p> <p>hello word4</p> </div> <script> const parentDOM = document.getElementById("parent-id"); const test1 = parentDOM.getElementById("test1"); // エラーが発生 // Uncaught TypeError: parentDOM.getElementById is not a function </script> </body></html>もし指定されたid を持つ要素がなければ、この関数はnull を返します。なお、id 引数は大文字小文字の区別があるため、document.getElementById("Main") は<div> 要素ではなくnull を返します。これは "M" と "m" がこのメソッドの目的では区別されるためです。
文書内にない要素はgetElementById() で検索されません。要素を作成し ID を割り当てたとき、getElementById() でアクセスする前にNode.insertBefore() またはそのたぐいのメソッドで、要素を文書ツリーに挿入しておく必要があります。
const element = document.createElement("div");element.id = "testqq";const el = document.getElementById("testqq"); // el は null になりますHTML 以外の文書の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。id 属性はXHTML, XUL などの一般的な場合には ID 型として定義されています。属性が ID 類であるかどうかが分からない実装では、null を返すでしょう。
仕様書
| Specification |
|---|
| DOM # ref-for-dom-nonelementparentnode-getelementbyid② |
ブラウザーの互換性
関連情報
Document: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。Document.querySelector():'div.myclass'のようなセレクターを通したクエリーのためのもの。Document.evaluate()xml:idによってXML 文書内を選択するユーティリティーメソッド