JavaScriptのDOM操作入門｜要素の追加・削除・変更をマスターする

DOM（Document Object Model）操作は、JavaScriptでWebページの要素を動的に追加・削除・変更するための技術です。ユーザーの操作に応じてページの内容を更新するインタラクティブなWebサイトを作るための基本スキルです。

基本的な使い方

DOM操作の第一歩は、操作対象の要素を取得することです。主要な取得メソッドを紹介します。

JavaScript

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

// CSSセレクタで取得（最初の1つ）
const firstBtn = document.querySelector(".btn");

// CSSセレクタで全件取得（NodeList）
const allBtns = document.querySelectorAll(".btn");
console.log("ボタン数:", allBtns.length);

// NodeListはforEachで処理可能
allBtns.forEach(btn => {
  console.log(btn.textContent);
});

// クラス名で取得（HTMLCollection）
const items = document.getElementsByClassName("item");

// タグ名で取得
const paragraphs = document.getElementsByTagName("p");

実行結果

ボタン数: 3
送信
キャンセル
リセット

querySelector()とquerySelectorAll()はCSSセレクタを使えるため最も柔軟です。実務ではこの2つを使うことがほとんどです。

要素の内容とスタイルの変更

取得した要素のテキスト、HTML、属性、スタイルを変更できます。

JavaScript

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

// テキストの変更
element.textContent = "新しいテキスト";

// HTMLの変更
element.innerHTML = "<strong>太字テキスト</strong>";

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

// スタイルの変更
element.style.color = "red";
element.style.fontSize = "20px";
element.style.backgroundColor = "#f0f0f0";

// クラスの操作
element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("highlight"); // あれば削除、なければ追加
console.log(element.classList.contains("active")); // true

実行結果

https://example.com
true

要素の追加と削除

新しいDOM要素を作成して追加したり、既存の要素を削除する方法です。

JavaScript

// 要素の作成と追加
const newDiv = document.createElement("div");
newDiv.textContent = "新しい要素です";
newDiv.classList.add("message");

// 親要素の末尾に追加
document.querySelector("#container").appendChild(newDiv);

// 特定の位置に挿入
const list = document.querySelector("ul");
const newItem = document.createElement("li");
newItem.textContent = "新しい項目";

// 先頭に挿入
list.prepend(newItem);

// 特定の要素の前に挿入
const thirdItem = list.children[2];
list.insertBefore(newItem, thirdItem);

// 要素の削除
const target = document.querySelector("#old-element");
target.remove(); // モダンな方法

// 子要素の全削除
const container = document.querySelector("#container");
container.innerHTML = ""; // 簡単だがイベントリスナーも消える

// 安全な全削除
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

実践的な活用例

TODOリストの動的生成など、実務で使うパターンを紹介します。

JavaScript

// TODOリストの動的生成
function addTodo(text) {
  const list = document.querySelector("#todo-list");

  const li = document.createElement("li");
  li.classList.add("todo-item");

  const span = document.createElement("span");
  span.textContent = text;

  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "削除";
  deleteBtn.addEventListener("click", () => li.remove());

  li.appendChild(span);
  li.appendChild(deleteBtn);
  list.appendChild(li);
}

// DocumentFragmentで効率的な一括追加
function renderList(items) {
  const fragment = document.createDocumentFragment();

  items.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item;
    fragment.appendChild(li);
  });

  // 1回のDOM操作で全件追加（パフォーマンス向上）
  document.querySelector("ul").appendChild(fragment);
}

renderList(["タスクA", "タスクB", "タスクC"]);

innerHTMLとtextContentの使い分け

innerHTMLはHTMLタグを含む文字列を解釈しますが、XSS（クロスサイトスクリプティング）のリスクがあります。ユーザー入力を表示する場合はtextContentを使うか、適切なエスケープ処理を行ってください。

パフォーマンスの注意点

DOM操作は比較的コストが高い処理です。ループ内で個別に要素を追加するよりも、DocumentFragmentにまとめてから一括追加する方が効率的です。また、innerHTMLによる大量のHTML書き換えは既存のイベントリスナーが失われるため注意が必要です。

まとめ

querySelector()/querySelectorAll()で要素を取得
textContent/innerHTMLで内容を変更
classListでクラスの追加・削除・切り替え
createElement()とappendChild()で要素を追加
一括追加にはDocumentFragmentを使う