概要
指定された ID を持つ要素を返します。
構文
element = document.getElementById(id);- elementは
Elementオブジェクトです。 - idは探される要素の一意の ID を表す文字列です。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<title>getElementById example</title>
<script>
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 属性は XHTML、XUL、その他の場合で一般的に ID 型 として定義されています。どの属性が ID 型であるかそうでないかわからない実装は、null を返すことが期待されます。
単純に要素を生成して ID を割り当てても、getElementById によって要素にアクセスすることはできません。その前に、Node.insertBefore() や同種のメソッドを使って、文書ツリー内に要素を挿入する必要があります。
var elm = document.createElement("div"); // 要素を生成
elm.id = 'testqq'; // 生成した div 要素の id を設定
alert( document.getElementById('testqq') ); // null
document.body.appendChild(elm);
alert( document.getElementById('testqq') ); // [object HTMLDivElement]
getElementById は DOM Level 1 で HTML 文書のために導入され、DOM Level 2 ですべての文書(XML など) の仕様に移行しました。
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) | 5.5 | 7.0 | 1.0 |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.0) | 6.0 | 6.0 | 1.0 |
仕様書
- DOM Level 2 コア仕様: getElementById