DocumentgetElementById() メソッドは、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。

ID を持たない要素にアクセスする必要がある場合は、 querySelector() で何らかのセレクターを使用して要素を検索することができます。

構文

var element = document.getElementById(id);

引数

id
探す要素の ID です。 ID は大文字と小文字の区別がある文字列で、文書内で固有です。指定された ID の要素は一つしかありません。

返値

指定された ID に一致する DOM 要素オブジェクトを記述した Element オブジェクト、または文書内に一致する要素がなければ null です。

HTML

<html>
<head>
  <title>getElementById example</title>
</head>
<body>
  <p id="para">Some text here</p>
  <button onclick="changeColor('blue');">blue</button>
  <button onclick="changeColor('red');">red</button>
</body>
</html>

JavaScript

function changeColor(newColor) {
  var elem = document.getElementById('para');
  elem.style.color = newColor;
}

結果

使用上のメモ

コードが機能するためには、メソッドの名前の中の "Id" は、大文字と小文字を正しく表記しなければなりませんgetElementByID() は自然に見えますが、妥当ではなく動作しません。

Document.querySelector()Document.querySelectorAll() などの他の要素検索メソッドとは異なり、 getElementById() はグローバルの document オブジェクトに対してのみ利用可能であり、 DOM のすべての要素オブジェクトのメソッドとしては利用できません。 ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="parent-id">
        <p>hello word1</p>
        <p id="test1">hello word2</p>
        <p>hello word3</p>
        <p>hello word4</p>
    </div>
    <script>
        var parentDOM = document.getElementById('parent-id');
        var test1=parentDOM.getElementById('test1');
        //throw error
        //Uncaught TypeError: parentDOM.getElementById is not a function
    </script>
</body>
</html>

もし指定された id を持つ要素がなければ、この関数は null を返します。なお、 id 引数は大文字小文字の区別があるため、 document.getElementById("Main")<div id="main"> 要素の代わりに null を返し、これは "M" と "m" がこのメソッドの目的では区別されるためです。

文書内にない要素getElementById() で検索されません。要素を作成し ID を割り当てたとき、 getElementById() でアクセスする前に Node.insertBefore() またはそのたぐいのメソッドで、要素を文書ツリーに挿入しておく必要があります。

var element = document.createElement('div');
element.id = 'testqq';
var el = document.getElementById('testqq'); // el は null になります

HTML 以外の文書の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 id 属性は XHTML, XUL などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 null を返すでしょう。

仕様書

仕様書 状態 備考
Document Object Model (DOM) Level 1 Specification
getElementById の定義
廃止された インターフェイスの初回定義
Document Object Model (DOM) Level 2 Core Specification
getElementById の定義
廃止された DOM 1 の置き換え
Document Object Model (DOM) Level 3 Core Specification
getElementById の定義
廃止された DOM 2 の置き換え
DOM
getElementById の定義
現行の標準 DOM 3 を置き換える予定

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 5.5Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

  • Document: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。
  • Document.querySelector(): 'div.myclass' のようなセレクターを通したクエリのためのもの。
  • xml:id - getElementById() による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, imu0x10, fscholz, khalid32, ethertank, Shoot, Marsf, Taken, Mgjbot, Hfjapancom
最終更新者: mfuji09,