.getElementById()

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

指定されたidの属性を持つ、要素の参照を返します。

文法

element = document.getElementById(id);

引数	説明
id	見つける対象要素の一意のIDを表す文字列を指定します。大文字小文字は区別されます。
戻り値
element	要素(Element)オブジェクトへの参照が返ります。また、ドキュメント内に指定したIDの要素が存在しない場合、`null`が返ります。

例

<!DOCTYPE html>
<html>
<head>
  <title>getElementById example</title>
  <script>
  function changeColor(newColor) {
    var elem = document.getElementById("para1");
    elem.style.color = newColor;
  }
  </script>
</head>
<body>
  <p id="para1">Some text here</p>
  <button onclick="changeColor('blue');">blue</button>
  <button onclick="changeColor('red');">red</button>
</body>
</html>

注意事項

この関数の正しいメソッド名に含まれる"Id"の部分の大文字小文字に注意してください。 "getElementByID"が自然に感じられるかもしれませんが、Dの部分が大文字ですと動作しません。

指定されたIDを持つ要素が存在しない場合、関数はnullを返します。 IDパラメーターは大文字小文字を区別することに注意してください。そのためdocument.getElementById("Main")の処理は、 <div id="main">の要素に対し、"M"と"m"が異なることから、このメソッドの対象外となり、代わりにnullが返されます。

ドキュメント内に要素が無ければ、getElementByIdによって検索されません。要素を作成してIDを割り当てた場合、getElementByIdを使用してそれにアクセスする前に、 insertBeforeまたは類似のメソッドを使用して、ドキュメントツリーへ要素を挿入しなければいけません。

var element = document.createElement("div");
element.id = 'testqq';

// elには、nullが返ります！
var el = document.getElementById('testqq');

非HTMLドキュメントの場合、 DOM実装は、ID型がどの属性であるかという情報を持たなければいけません。 "id"の名前を持つ属性は、ドキュメントのDTD内で定義されていなければ、ID型ではありません。 XHTML、XUL、その他の一般的なケースでは、id属性はID型であるとして定義されています。属性がID型か否かを知らない実装では、nullを返すことが期待されます。

ブラウザ互換性

デスクトップ
機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	1.0	1.0 (1.7 or earlier)	5.5	7.0	1.0

モバイル
機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	1.0	1.0 (1.0)	6.0	6.0	1.0

仕様

getElementByIdはDOMレベル1でHTMLドキュメントへ導入され、 DOMレベル2で全てのドキュメントへ移されました。

DOMレベル2コア仕様:getElementById

.getElementById()

文法

例

注意事項

ブラウザ互換性

仕様

関連項目