DOM操作(DOM manipulation)

　DOM（Document Object Model）操作とは、JavaScriptなどのスクリプト言語を使ってHTMLやXMLの構造・内容・見た目を動的に変えることです。ブラウザはHTMLを読み込むと、ページの要素をツリー状（DOMツリー）にしてメモリ上に表現し、JavaScriptはそのDOMツリーを通じてページを操作します。

1. DOMの基本構造

HTML:

<!DOCTYPE html>

<html>

<head>

  <title>DOM操作例</title>

</head>

<body>

  <h1 id="title">Hello</h1>

  <p class="message">Welcome!</p>

</body>

</html>


DOMツリー（概念図）:

Document

 └── html

      ├── head

      └── body

           ├── h1#title

           └── p.message

2. 要素の取得

Javascript
// IDで取得
const title = document.getElementById("title");

// クラスで取得（複数要素）
const messages = document.getElementsByClassName("message");

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

// CSSセレクタで取得（すべて）
const allMessages = document.querySelectorAll(".message");

3. 要素の内容変更

Javascript
title.textContent = "こんにちは"; // テキストのみ変更
title.innerHTML = "<span style='color:red'>こんにちは</span>"; // HTMLを含めて変更

4. 属性の変更

Javascript
title.setAttribute("data-lang", "ja"); // 属性追加・変更
console.log(title.getAttribute("data-lang")); // 属性取得
title.removeAttribute("data-lang"); // 属性削除

5. スタイルの変更

Javascript
title.style.color = "blue";
title.style.fontSize = "2em";

6. 要素の追加・削除

Javascript
// 新しい要素を作成
const newPara = document.createElement("p");
newPara.textContent = "新しい段落です。";

// bodyの末尾に追加
document.body.appendChild(newPara);

// 要素を削除
newPara.remove();

7. イベント処理

Javascript
title.addEventListener("click", () => {
  alert("タイトルがクリックされました！");
});

✅ ポイント

  • querySelector / querySelectorAll は柔軟で推奨される取得方法。
  • innerHTML は便利だが、外部入力を直接入れるとXSS脆弱性の原因になるため注意。
  • DOM操作は頻繁に行うとパフォーマンスに影響するため、まとめて行うのが望ましい。