DOM操作入門｜HTMLをオブジェクトとして扱う JavaScript の世界

HTMLが単なる“文字列”から“操作できるオブジェクト”になる瞬間

前の記事で、言語そのものの「組み込みオブジェクト」、そして「ブラウザオブジェクト（BOM）」を学びました。今回はその次のステップ――Webページそのものを操作できる世界に入ります。
この世界を支えているのが “DOM（Document Object Model）” という仕組みです。

言い換えると：

「HTMLのタグたちを JavaScript で操れる“オブジェクトの木”」として捉えることで、ボタンを押したら文章が変わる、動的に要素が出現する、といった体験が可能になります。

この章を読めば、Webページを「ただ表示するだけ」から「ユーザーと双方向で動く」ページに変える力がぐっと増えます。

1. DOMとは何か？ ―― “HTMLがオブジェクトになる仕組み”

　1-1. DOMの概要

DOM は、HTML文書を ツリー構造（階層構造） で表したものです。
1つひとつのタグ（例：<div>, <p>）が “ノード” と呼ばれるオブジェクトとして扱われ、親子関係・兄弟関係があります。
JavaScriptからそのノードにアクセスして、内容を変えたり、追加・削除・スタイル変更できるようになります。

引用元：mdn

　1-2. なぜ DOM を知る必要があるのか？

ユーザーが操作したときに反応を返すページを作るには、HTMLを“読み書き可能なデータ”として捉える必要があります。
フレームワークやライブラリを使う前に、基本の「生の DOM 操作」を理解しておけば、後の学びもスムーズになります。
jQuery などが流行した時代もありましたが、現在はモダンなブラウザで純粋な DOM 操作が十分高速・互換性も高くなっています。

2. 要素（エレメント）の取得・操作

　2-1. 要素の取得方法比較

<!-- HTML例 -->
<div id="header">タイトル</div>
<ul class="items">
  <li>項目A</li>
  <li>項目B</li>
</ul>

// 取得例：
const header = document.getElementById("header");
const itemsList = document.getElementsByClassName("items");    // HTMLCollection
const firstLI = document.querySelector(".items li");          // 最初の li
const allLIs  = document.querySelectorAll(".items li");       // NodeList

getElementById() は ID がユニーク要素1つだけを取得。
getElementsByClassName()／getElementsByTagName() は 複数要素を HTMLCollection として取得。
querySelector()／querySelectorAll() は CSS セレクタが使えて柔軟。初学者にも扱いやすい。

　2-2. 内容・属性・スタイルの変更

header.textContent = "新しいタイトル";     // テキストを変更
header.innerHTML   = "<strong>新しい</strong>タイトル";  // HTMLを含めて変更
header.setAttribute("data-role", "main"); // カスタム属性を追加
header.style.color = "#FF6600";           // CSSスタイルを直に変更

✅ textContent は “文字だけ” を操作。

✅ innerHTML は HTML を含めた操作なので、使う場面で使い分けると安全です。

　2-3. 要素の追加・削除

const newItem = document.createElement("li");
newItem.textContent = "項目C";
document.querySelector(".items").appendChild(newItem);

const old = document.querySelector(".items li:first-child");
old.remove(); // 削除

createElement() で新要素を生成
appendChild()／insertBefore() で挿入
remove() または parentNode.removeChild() で削除

こうしてユーザーの操作に応じてページ構造が変化する「動的Web」が実現されます。

3. イベントと連動させて「動くページ」に

<button id="btn-change">色を変える</button>
<div id="box">ここをクリックで変わります</div>

const btn = document.getElementById("btn-change");
const box = document.getElementById("box");

btn.addEventListener("click", () => {
  box.style.backgroundColor = box.style.backgroundColor === "yellow" ? "lightblue" : "yellow";
});

このような「クリックしたら色が変わる」「マウスを動かしたら動く」という動きは、DOM 取得 + スタイル変更 + イベントの3つが組み合わさってできています。

イベント処理の中で DOM を変えることが、Webページに「反応性」を持たせる鍵です。

4. 実務で使えるシナリオ

フォーム入力後に結果をリアルタイムで表示／変更
モーダルウインドウを生成して挿入／削除する
ページスクロールに応じて要素をアニメーション表示
SPA（シングルページアプリ）で「URLは変わらないが内部コンテンツが切り替わる」処理

// “もっと読み込む”ボタンを押して、リストを5件ずつ追加する例
const list  = document.getElementById("list");
const btn   = document.getElementById("btn-more");
let   count = 1;

btn.addEventListener("click", () => {
  for (let i = 0; i < 5; i++) {
    const li = document.createElement("li");
    li.textContent = `追加項目 #${count++}`;
    list.appendChild(li);
  }
});

5. 初心者がよくつまずくポイント

古いブラウザ対応を意識しすぎて、最新の API を使わない → querySelectorAll() や addEventListener() は現在ほぼ全ブラウザで使えます。
innerHTML を乱用してしまう → HTMLを直打ちすると XSS リスクやパフォーマンス低下の原因になります。文字列のみなら textContent を優先。
大量の DOM 操作でレンダリングが遅くなる → ループで都度 appendChild() する場合は、DocumentFragment を使うと改善します。
イベントバブリング／キャプチャを理解していない → event.stopPropagation()／event.preventDefault() などを知っておくとトラブル回避できます。