HTML DOM Document getElementById() メソッド

定義と使用法

getElementById() メソッドは指定された id 値を持つ要素を返します。

要素が存在しない場合、getElementById() メソッドは返します null。

getElementById() メソッドは HTML DOM で最もよく使われるメソッドの1つです。ほぼいつでも HTML エレメントを読み取ったり編集しようとするときに使用されます。

ヒント

どの id もユニークであるべきですが、

同じ id を持つ要素が2つ以上ある場合、 getElementById() 最初のものを返します。

も参照してください：

getElementsByTagName() メソッド

getElementsByClassName() メソッド

querySelector() メソッド

querySelectorAll() メソッド

インスタンス

例 1

指定された id を持つ要素を取得します：

document.getElementById("demo");

実際に試してみてください

例 2

要素を取得し、色を変更します：

const myElement = document.getElementById("demo");
myElement.style.color = "red";

実際に試してみてください

例 3

または色を変更するだけです：

document.getElementById("demo").style.color = "red";

実際に試してみてください

文法

document.getElementById(elementId)

パラメータ

パラメータ 説明
elementId 必須。要素のid値。

返り値

タイプ 説明
オブジェクト

指定されたidを持つ要素

見つからない場合、nullを返します。

技術的な詳細

getElementById() は重要でよく使用されるメソッドであり、指定されたドキュメント要素を表すElementオブジェクトを取得する簡単な方法を提供します。

このメソッドはid属性の値が elementId を持つElementノードを複数見つけると、それを返します。指定されたElementノードが見つからない場合、 nullを返します。id属性の値はドキュメント内でユニークであるため、このメソッドは指定された elementId のElementノードを取得し、そのようなElementノードをランダムに返します。または、 null。

注意：の名前で始まります。 Id の末尾を、 ID、スペルミスを避けてください！

HTMLドキュメントでは、このメソッドは指定されたidを持つ属性を常に検索します。正しく記述してください、 HTMLDocument.getElementByName() メソッドを使用して、name属性の値に基づいてHTML要素を検索します。

XMLドキュメントでは、このメソッドはidの型を持つ任意の属性を使用して検索を行い、その属性の名前に関係なく検索します。XML属性の型が未知である場合（例えば、XMLパーサーがDTDを無視したり、ドキュメントのDTDを定位できない場合）、このメソッドは常に nullクライアントサイドJavaScriptでは、このメソッドはXMLドキュメントと一緒に使用されることはあまりありません。実際には、getElementById() このメソッドは最初にHTMLDocumentインターフェースの一部として定義されましたが、後の2レベルDOMではDocumentインターフェースに移されました。

ブラウザのサポート

document.getElementById() DOMレベル2（2001）の機能です。

すべてのブラウザがサポートしています：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート

関連ページ

CSS ガイド：CSS 语法

CSS リファレンスマニュアル：CSS #id 选择器

HTML DOM リファレンスマニュアル：HTML DOM id 属性

HTML DOM リファレンスマニュアル：HTML DOM Styleオブジェクト