1. `document.getElementById` とは？

document.getElementById は、HTML 要素の ID を指定して要素を取得するメソッド です。

ポイント：指定した id に一致する 最初の要素 を取得する。

2. 基本的な使い方

const element = document.getElementById("myElement");

myElement：取得したい要素の id を指定
element：取得した要素（null の場合もある）

☑️ 例1：要素を取得してテキストを変更

const heading = document.getElementById("title");
heading.textContent = "新しいタイトル";

ID title の要素のテキストを変更

3. 取得した要素の操作

☑️ 例2：CSS スタイルを変更

const box = document.getElementById("box");
box.style.backgroundColor = "lightblue";

ID box の背景色を変更

☑️ 例3：クリックイベントを追加

const button = document.getElementById("btn");
button.addEventListener("click", () => {
    alert("ボタンがクリックされました！");
});

ID btn のボタンをクリックするとアラートが表示

4. `getElementById` の注意点

☑️ 取得できない場合（`null` になる）

const nonExistent = document.getElementById("notFound");
console.log(nonExistent); // null

ID notFound が存在しないと null が返る

☑️ 要素が `null` のときの対処

const element = document.getElementById("myElement");
if (element) {
    element.textContent = "見つかった！";
} else {
    console.log("要素が見つかりません");
}

要素が存在するかチェックしてから操作する

5. `querySelector` との違い

document.getElementById は id による 直接検索 に特化していますが、
querySelector は CSS セレクターを利用 できます。

🔍 `getElementById` vs `querySelector`

メソッド	概要
`document.getElementById("id名")`	`id` による高速な要素取得（単一要素）
`document.querySelector("#id名")`	`CSS セレクター` を使用（より柔軟）

☑️ 例4：`querySelector` を使った場合

const element = document.querySelector("#myElement");

CSS セレクターを使用して ID を取得する方法

6. まとめ

☑️ document.getElementById("id") を使うと、ID から要素を取得できる
☑️ 存在しない ID を指定すると null になるので注意
☑️ style や textContent で要素の変更が可能
☑️ querySelector("#id") との違いを理解する

getElementById を活用して、DOM 操作をスムーズに行おう！