document.getElementById() - idで要素を取得する

投稿日: / 更新日:

JavaScriptのdocument.getElementById()は、ドキュメント内にある、指定したidを持つ要素を1つ取得するメソッドです。存在しない場合はnullが返ります。

サンプルコード

<p id="target">目的の要素</p>
// [id="target"]を取得 (<p id="target">目的の要素</p>)
var element = document.getElementById( "target" ) ;

// 取得した要素の文字色を変更する (応用)
element.style.color = "#D36015" ;

// 存在しない[id="syncer"]を取得 (null)
var element = document.getElementById( "syncer" ) ;

デモ

下の「実行」のボタンを押すと、document.getElementById()を使って要素を取得します。それだけだと見た目で何が起こっているか分からないということで、おまけとして、取得した要素の文字色を変更しています。取得した要素に何をするかは、あなたの自由です。

構文

element || null = document.getElementById( id )

引数

項目説明
id取得したい要素のidを指定する。

戻り値

項目説明
element取得した要素が戻り値となる。
null要素が存在しなかった場合、nullが戻り値となる。

ノート

サポート状況
どのブラウザでも対応している。
存在しない場合はnull
存在しないidを指定した場合、戻り値はnullundefinedではない。
複数ある場合は1つだけ
そもそもHTMLの文法的に間違いだが、ドキュメントに同じidの要素が複数ある場合、そのidをgetElementById()で取得すると、一番最初の要素(HTMLで一番最初に記述されている要素)のみ取得できる。
ドキュメント上にないとダメ
createElement()で作成してドキュメントに挿入していない状態の要素にidを付けただけでは、getElementById()で取得することはできない。
連動している
element1element2、それぞれに同じ要素を代入したとします。この時、element1を変更したら、element2にもその変更が反映されます。

例文

存在する場合としない場合で処理を分ける

要素が存在した場合としなかった場合で処理を分けるには、下記の通りです。

// [id="target"]を取得
var element = document.getElementById( "target" ) ;

// 存在した場合
if( element ) {
	// ...

// 存在しなかった場合
} else {
	// ...

}

変数でidを指定

idは変数で指定できます。こういった方法は、動的なコンテンツを作りたい場合に必要になってきます。

// [id="target"]を取得したい
var idName = "target" ;

// 要素を取得 (変数でidを指定)
var element = document.getElementById( idName ) ;

直接、変更を加える

取得した要素を変数に代入せずに、そのまま利用することができます。ただし、要素が存在しなかった場合にエラーになるので、こういった書き方はよほど限定したケースじゃないと非推奨です。

// [id="target"]を取得してそのまま文字色を変更
document.getElementById( "target" ).style.color = "#D36015" ;