JavaScript入門 - DOM操作の基礎

DOM操作の基礎

DOM（Document Object Model）は、HTMLドキュメントを操作するためのAPIです。要素の選択、内容の変更、スタイルの変更など、Webページを動的に操作することができます。

タスク

要素の選択

getElementById、getElementsByClassNameを使って要素を選択してみましょう。

要素の作成と追加

createElement、appendChildを使って新しい要素を追加してみましょう。

スタイルの変更

styleプロパティを使って要素のスタイルを変更してみましょう。

イベントリスナー

addEventListenerを使ってクリックイベントを処理してみましょう。

ヒント

要素の選択と操作の基本的な方法を学びましょう。

参考コード

// DOM操作の例

// 要素の選択
const container = document.getElementById("container");
const boxes = document.getElementsByClassName("box");

// 要素の内容を変更
boxes[0].textContent = "変更された要素1";

// 新しい要素の作成と追加
const newBox = document.createElement("div");
newBox.className = "box";
newBox.textContent = "新しい要素";
container.appendChild(newBox);

// スタイルの変更
boxes[1].style.backgroundColor = "#e3f2fd";
boxes[1].style.padding = "15px";

// クラスの追加と削除
boxes[2].classList.add("highlight");

// イベントリスナーの追加
newBox.addEventListener("click", function() {
    this.textContent = "クリックされました！";
    this.style.backgroundColor = "#ffcdd2";
});