JavaScript の DOM の概要と基本操作

JavaScript の基礎
No.200
コーディング入門

日付：2025年2月18日

JavaScript における DOM (Document Object Model) の基本概念や、要素の取得・変更・追加・削除などの操作方法について解説します。

はじめに

DOM (Document Object Model) は、HTML や XML を JavaScript で操作するための仕組み です。

ブラウザは、Web ページを読み込むと DOM ツリー を構築し、JavaScript を使って ページの内容や構造を動的に変更 できます。

本記事では、JavaScript における DOM の基本概念や、要素の取得・変更・追加・削除などの操作方法について詳しく解説します。

1. DOM とは？

DOM (Document Object Model) は、Web ページをオブジェクトとして扱うためのインターフェース です。

  • HTML の各要素はオブジェクトとして扱われる
  • JavaScript を使って要素を変更・追加・削除できる
  • イベントを登録して、ユーザー操作に応じた処理を実行できる

✅ 例: DOM の基本構造

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>DOMの基本</title>
  </head>
  <body>
    <h1 id="title">JavaScript DOM</h1>
    <p class="description">これは JavaScript の DOM 操作の例です。</p>
    <button onclick="changeText()">変更</button>
    <script>
      function changeText() {
        document.getElementById("title").textContent = "変更されました！";
      }
    </script>
  </body>
</html>

2. DOM 要素の取得

DOM の要素を取得するには、さまざまな方法があります。

2.1 getElementById() (ID で取得)

JAVASCRIPT
const title = document.getElementById("title");
console.log(title.textContent); // JavaScript DOM

2.2 getElementsByClassName() (クラス名で取得)

JAVASCRIPT
const descriptions = document.getElementsByClassName("description");
console.log(descriptions[0].textContent);

2.3 querySelector() (CSS セレクタで取得)

JAVASCRIPT
const firstParagraph = document.querySelector("p");
console.log(firstParagraph.textContent);

2.4 querySelectorAll() (複数の要素を取得)

JAVASCRIPT
const allParagraphs = document.querySelectorAll("p");
allParagraphs.forEach((p) => console.log(p.textContent));

3. DOM の変更

DOM の要素は JavaScript で簡単に変更できます。

3.1 テキストの変更

JAVASCRIPT
document.getElementById("title").textContent = "変更されました！";

3.2 属性の変更

JAVASCRIPT
document.getElementById("title").setAttribute("class", "new-class");

3.3 スタイルの変更

JAVASCRIPT
document.getElementById("title").style.color = "red";

4. DOM 要素の追加と削除

4.1 新しい要素の追加

JAVASCRIPT
const newElement = document.createElement("p");
newElement.textContent = "新しい段落です。";
document.body.appendChild(newElement);

4.2 要素の削除

JAVASCRIPT
const removeElement = document.getElementById("title");
removeElement.remove();

5. イベントの設定

DOM では、ユーザーの操作に応じてイベントを設定 できます。

5.1 onclick を使用する

JAVASCRIPT
document.getElementById("title").onclick = function () {
  alert("タイトルがクリックされました！");
};

5.2 addEventListener() を使用する

JAVASCRIPT
const button = document.querySelector("button");
button.addEventListener("click", function () {
  alert("ボタンがクリックされました！");
});

✅ イベントの種類

  • click: クリック時
  • mouseover: マウスホバー時
  • keydown: キーが押されたとき
  • load: ページの読み込み完了時

6. まとめ

JavaScript の DOM を理解することで、Web ページを動的に操作できる ようになります。

✅ 学んだこと

  • DOM は Web ページをオブジェクトとして扱う仕組み
  • 要素の取得方法 (getElementById, querySelector など)
  • 要素の変更・追加・削除が可能
  • イベント (onclick, addEventListener) を使ってユーザー操作に対応

これらのテクニックを活用し、よりインタラクティブな Web ページを作成しましょう。