document.getElementById()

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

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

sample_getElementById.html

<h1 id="fighter-name">八神庵</h1>
<p id="fighter-style">八神流古武術</p>
<p id="fighter-age">20</p>
<button id="btn-update">情報を更新する</button>

sample_getElementById.js

// パターン1: テキストを取得する
var nameEl = document.getElementById("fighter-name");
console.log(nameEl.textContent); // 『八神庵』と出力されます。

var styleEl = document.getElementById("fighter-style");
console.log(styleEl.textContent); // 『八神流古武術』と出力されます。

// パターン2: テキストを変更する
var ageEl = document.getElementById("fighter-age");
ageEl.textContent = "年齢: 20歳";

// パターン3: 属性を変更する
var btn = document.getElementById("btn-update");
btn.setAttribute("disabled", "true");
btn.textContent = "更新済み";

// パターン4: nullチェックをしてから操作する
var el = document.getElementById("nonexistent");
if (el) {
	el.textContent = "見つかりました。";
} else {
	console.log("要素が見つかりませんでした。"); // 存在しない場合はこちらが出力されます。
}

サンプルページはこちら

存在しない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名で要素を特定してその属性を操作してみよう』で、より詳しく解説しています。良ければご覧下さい。