Visit Mozilla.org

DOM:document.getElementById

出典: MDC

« Gecko DOM リファレンス

目次

[編集] 概要

指定された ID を持つ要素を返します。

[編集] 要素

element = document.getElementById(id);

ここで

  • elementelement オブジェクトです。
  • id は探される要素の一意の ID を表す文字列です。

[編集]

<html>
<head>
<title>getElementById example</title>

<script type="text/javascript">

function changeColor(newColor)
{
 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 を持つ要素がなければ、この関数は null を返します。DOM 実装はその属性が ID 型であると言う情報を持たなければならないことに注意してください。"id" という名前の属性は、ドキュメントの DTD でそのように定義されない限り ID 型ではありません。id 属性は XHTMLXUL、その他の場合で一般的に ID 型 として定義されています。どの属性が ID 型であるかそうでないかわからない実装は、null を返すことが期待されます。

単純に要素を生成して ID を割り当てても、getElementById によって要素にアクセスすることはできません。その前に、insertBefore や同種のメソッドを使って、ドキュメントツリー内の隠れた div などに要素を挿入しなければなりません。

var element = document.createElement("div");
element.id = 'testqq';
var el = document.getElementById('testqq'); // el will be null!

getElementById は DOM Level 1 で HTML ドキュメントのために導入され、DOM Level 2 ですべてのドキュメントに移行しました。

[編集] 仕様