8. DOM 操作

JavaScript は、ウェブページの内容や構造、スタイルを動的に操作するために利用されます。その中心となるのが DOM（Document Object Model）操作です。この章では、DOM 操作の基本から具体的な実践例までを学んでいきます。

8.1 DOM とは？

DOM（Document Object Model）は、HTML や XML 文書をプログラムからアクセスし操作するための標準的な API です。DOM は文書をツリー構造として表現し、各要素や属性をオブジェクトとして扱います。

8.1.1 DOM ツリーの概念

DOM ツリーは、HTML 文書の構造を木構造として表現します。以下は簡易的な HTML とその DOM ツリーの例です。

<!DOCTYPE html>
<html>
  <head>
    <title>DOM操作の基本</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>これは例です。</p>
  </body>
</html>

この HTML は以下のような DOM ツリーになります：

document
 |
 |- html
     |- head
     |    |- title
     |- body
          |- h1
          |- p

8.2 DOM 操作の基本

DOM を操作するための基本的なメソッドやプロパティを紹介します。

8.2.1 要素の取得

1. `getElementById`

指定した ID を持つ要素を取得するメソッドです。

let header = document.getElementById("header");

2. `getElementsByClassName`

指定したクラス名を持つ要素をコレクションとして取得するメソッドです。

let items = document.getElementsByClassName("item");

3. `getElementsByTagName`

指定したタグ名を持つ要素をコレクションとして取得するメソッドです。

let paragraphs = document.getElementsByTagName("p");

4. `querySelector`

指定したセレクタに一致する最初の要素を取得するメソッドです。

let firstItem = document.querySelector(".item");

5. `querySelectorAll`

指定したセレクタに一致するすべての要素をコレクションとして取得するメソッドです。

let allItems = document.querySelectorAll(".item");

8.2.2 要素の作成と追加

例えば、新しい段落を作成して追加する場合は以下のようにします。

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

// 既存の要素に追加
document.body.appendChild(newParagraph);

8.2.3 要素の属性と内容の変更

1. 属性の変更

let image = document.querySelector("img");
image.setAttribute("src", "new-image.jpg");
image.setAttribute("alt", "新しい画像の説明");

2. 内容の変更

let heading = document.querySelector("h1");
heading.textContent = "新しいタイトルです";

8.3 実践例：簡単なインタラクティブな操作

以下に、ユーザーがボタンをクリックしたときに新しいアイテムをリストに追加する簡単な例を示します。

<!DOCTYPE html>
<html>
  <head>
    <title>DOM操作の実践</title>
  </head>
  <body>
    <h1>DOM操作の実践例</h1>
    <ul id="item-list">
      <li>アイテム1</li>
      <li>アイテム2</li>
    </ul>
    <button id="add-button">アイテムを追加</button>

    <script>
      document
        .getElementById("add-button")
        .addEventListener("click", function () {
          let newItem = document.createElement("li");
          newItem.textContent = "新しいアイテム";
          document.getElementById("item-list").appendChild(newItem);
        });
    </script>
  </body>
</html>

この例では、ボタンをクリックするたびにリストに新しいアイテムが追加されます。テキストを読み取り、コードを実行し、インタラクティブな要素を作成する楽しさを体感してください。

8.4 DOM 操作のまとめ

DOM 操作は、ウェブページを動的に制御するための強力なスキルです。この章で紹介した基本を理解し、実際に手を動かしてみることで、より複雑な操作も行えるようになります。次はイベントハンドリングについて学び、さらにインタラクティブなウェブページを作成できるようになりましょう。