mozilla
Your Search Results

    document.getElementById

    概要

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

    構文

    element = document.getElementById(id);
    • elementelement オブジェクトです。
    • 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 属性は XHTMLXUL、その他の場合で一般的に ID 型 として定義されています。どの属性が ID 型であるかそうでないかわからない実装は、null を返すことが期待されます。

    単純に要素を生成して ID を割り当てても、getElementById によって要素にアクセスすることはできません。その前に、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

    仕様書

    関連情報

    • document … 文書内の要素への参照を取得する為に使用できるプロパティや他のメソッドを参照する DOM インタフェース
    • xml:id … getElementById による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とするユーティリティメソッドを持つ

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

    Contributors to this page: fscholz, Marsf, ethertank, Mgjbot, Taken, Shoot, Hfjapancom, khalid32
    最終更新者: khalid32,
    サイドバーを隠す