DOM 操作

Document Object Model（DOM）を使用して HTML 要素を操作します。DOM は、HTML を JavaScript から触れるようにツリー構造で表現したものです。

要素の取得

// ID で要素を取得
const header = document.getElementById("header");

// CSS セレクタで要素を取得（最初の一致）
const container = document.querySelector(".container");

// CSS セレクタで要素を取得（すべての一致）
const buttons = document.querySelectorAll("button");

// クラス名・タグ名で取得
const items = document.getElementsByClassName("item");
const paragraphs = document.getElementsByTagName("p");

取得メソッドによる違い

getElementsByClassName / getElementsByTagName は live な HTMLCollection を返し、DOM の変化に追従します。一方 querySelectorAll は取得時点の状態を固定した 静的な NodeList を返します。ループ中に要素を追加・削除する場合、この違いが挙動の差になることがあります。迷ったら querySelector / querySelectorAll を使うのが無難です。

要素の操作

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

// テキストコンテンツの変更
header.textContent = "新しいヘッダー";

// HTML コンテンツの変更
container.innerHTML = "<p>新しいコンテンツ</p>";

// 属性の操作
const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
console.log(link.getAttribute("href")); // https://example.com

// スタイルの変更
header.style.color = "blue";
header.style.fontSize = "24px";

// クラスの追加・削除・トグル
container.classList.add("highlight");
container.classList.remove("hidden");
container.classList.toggle("active"); // クラスがあれば削除、なければ追加
console.log(container.classList.contains("highlight")); // true

innerHTML には XSS のリスク

innerHTML に ユーザーが入力した文字列 をそのまま入れると、悪意あるスクリプトが実行される XSS（クロスサイトスクリプティング）の危険があります。テキストを表示するだけなら textContent を使いましょう。innerHTML は自分が用意した信頼できる内容にのみ使います。

要素の作成と追加

const container = document.querySelector(".container");

// 新しい要素の作成
const newParagraph = document.createElement("p");
newParagraph.textContent = "これは新しい段落です。";

// 要素の追加（末尾に）
container.appendChild(newParagraph);

// 特定の位置に要素を挿入（先頭に）
container.insertBefore(newParagraph, container.firstChild);

// 要素の削除
newParagraph.remove(); // モダンブラウザで広くサポート

初級者向け解説

DOM 操作はウェブページを動的に変化させるための基本です。ただし複雑な UI を素の DOM 操作だけで組むと管理が大変になります。規模が大きくなったら React・Vue などのフレームワークを使うと効率的です。

次に読む

イベント処理 — クリックなどのユーザー操作に反応して DOM を動かす

要素の取得​

要素の操作​

要素の作成と追加​

次に読む​

要素の取得

要素の操作

要素の作成と追加

次に読む