document.getElementById()対応: DOM Level 1（1998）

var element = document.getElementById("ID名");

指定したIDを持つHTML要素（Elementオブジェクト）を返します。該当するHTML要素が存在しない場合は『null』を返します。

<h1 id="title">メインタイトル</h1>
<p id="description">ここは説明文です。</p>

var title = document.getElementById("title");
console.log(title.textContent); // 『メインタイトル』と出力されます。

var desc = document.getElementById("description");
desc.textContent = "説明文を変更しました。";

上記のコードを実行すると、HTMLは以下のように変化します。

<!-- 実行前 -->
<h1 id="title">メインタイトル</h1>
<p id="description">ここは説明文です。</p>

<!-- 実行後 -->
<h1 id="title">メインタイトル</h1>
<p id="description">説明文を変更しました。</p>

コンソールには以下が出力されます。

"メインタイトル"    // title.textContentの値です。

存在しないIDを指定すると『null』が返されます。『null』のまま操作しようとするとエラーになります。『document.querySelector()』と同様に、nullチェックをしてから操作してください。

// 存在しないIDを指定します。
var el = document.getElementById("nothing");
el.innerHTML = "<p>テスト</p>"; // TypeError: Cannot set properties of null

// 正しい書き方
var el = document.getElementById("title");
if (el) {
	el.innerHTML = "<p>新しいタイトル</p>";
}

『document.getElementById()』はID名でHTML要素を取得する最もシンプルなメソッドです。ID名はページ内で一意でなければならないため、必ず1つのHTML要素だけが返されます。

同様の取得は『document.querySelector("#ID名")』でも可能ですが、『document.getElementById()』の方が内部的な処理が高速なため、IDでHTML要素を取得する場合は『document.getElementById()』の使用をおすすめします。

引数にはID名の文字列のみを指定します。CSSセレクタのように『#』を付ける必要はありません。『#』を付けると正しく取得できませんのでご注意ください。

『document.getElementById()』はチュートリアル記事『id名で要素を特定してその属性を操作してみよう』で、より詳しく解説しています。良ければご覧下さい。