DOM（ドム）とは？Webページの制御盤

DOM (Document Object Model) は、ブラウザが読み込んだHTML文書を「プログラムから操作可能なオブジェクト」として表現したものです。JavaScriptを使ってDOMを操作することで、以下のようなことが可能になります。

• ボタンクリックでポップアップを出す
• フォームの入力内容をリアルタイムでチェックする
• 新しいチャットメッセージを画面に追加する

つまり、静的なHTMLに「命」を吹き込むのがDOM操作です。

1. 要素を取得する：操作の対象を決める

何を操作するかを決めるために、まずはHTML要素を取得します。現代の開発では主に以下の2つが使われます。

querySelector / querySelectorAll

CSSセレクタと同じ書き方で要素を取得できる、最も強力で汎用的なメソッドです。

// 最初の1つだけ取得
const title = document.querySelector(".main-title");

// 該当するすべてを取得（リストで返る）
const buttons = document.querySelectorAll(".btn");
buttons.forEach(btn => {
    console.log("ボタンが見つかりました");
});

getElementById

IDを使って特定の要素を高速に取得します。IDはページ内でユニークである必要があるため、必ず1つの要素（またはnull）が返ります。

const header = document.getElementById("header");

2. 中身を書き換える

取得した要素の内容を変更します。

• textContent: 安全に「文字」だけを書き換えます。HTMLタグは無視されます。
• innerHTML: HTMLタグを含めて書き変えます。便利ですが、セキュリティリスク（XSS）に注意が必要です。

const message = document.querySelector("#msg");
message.textContent = "こんにちは！"; 
// message.innerHTML = "太字になります";

3. スタイルを変更する

CSSを直接書き換えることも可能です。プロパティ名はキャメルケース（`backgroundColor`など）になります。

const box = document.querySelector(".box");
box.style.backgroundColor = "red";
box.style.display = "none"; // 非表示にする

4. イベントを監視する

ユーザーの操作（クリック、入力、スクロールなど）を検知するには `addEventListener` を使います。

const btn = document.querySelector("#save-btn");

btn.addEventListener("click", () => {
    console.log("保存しました！");
    btn.textContent = "保存完了";
    btn.style.backgroundColor = "#ccc";
});

応用：要素を新しく作る

`document.createElement` を使うと、HTMLに書かれていない要素をプログラムで生成し、ページに追加（`appendChild`）できます。ToDoリストアプリなどで必須の技術です。

まとめ

DOM操作はJavaScriptの「手足」です。これを自在に操れるようになれば、アニメーション、ゲーム、Webアプリなど、ブラウザ上で動くあらゆる表現が可能になります。まずは `querySelector` と `addEventListener` のペアを確実に覚えましょう。