実務型コーディング演習 / 約20分

DOM操作の基本: 要素の追加・削除・更新

なぜこれを学ぶか

JavaScriptからHTMLを操作する「DOM API」は、フロントエンド開発の基礎です。要素の取得・追加・削除・イベント処理のパターンを覚えましょう。

DOMとは: HTML文書をJavaScriptから操作できるツリー状のオブジェクト（Document Object Model）です。document.querySelector() で要素を取得し、プロパティ・メソッドで操作します。

要素の取得: document.querySelector("#id") でID指定、document.querySelector(".class") でクラス指定、document.querySelectorAll("li") で複数取得（NodeList）。

要素の作成と追加: document.createElement("div") で要素を作り、parent.appendChild(child) で子要素として追加します。テキストは element.textContent = "テキスト" で設定。

要素の削除: element.remove() でその要素ごと削除、または parent.removeChild(child) で親要素から子を削除します。

イベント処理: element.addEventListener("click", function(event) { ... }) でクリックイベントを設定。event.target は実際にクリックされた要素です。フォームの送信は event.preventDefault() でデフォルト動作（ページ再読み込み）を止めます。

重要ポイント

querySelector でCSS同様のセレクタで要素取得
createElement + appendChild で動的に要素追加
addEventListener でクリックなどのイベントに反応

理解度チェック

選ぶと即座に解説が表示されます。

フォーム送信時に `event.preventDefault()` を呼ぶ目的は？

ヒントを見る

フォームの `submit` イベントのデフォルト動作は何でしょうか？

コーディング演習実際に書く

テキスト入力からアイテムを追加し、追加したアイテムをクリックで削除できるリストを管理する関数を実装してください。仮想DOM環境で動作確認します（実際のDOM APIと同じインターフェース）。

function manageList(items)

模範解答（読んで理解したら、自力で書き直してみましょう）

function manageList(items) {
  let list = [...items]  // コピーして管理（元の配列を変更しない）

  function addItem(text) {
    list.push(text)  // 末尾に追加
  }

  function removeItem(index) {
    list.splice(index, 1)  // 指定インデックスから1要素削除
  }

  function getItems() {
    return list
  }

  return { addItem, removeItem, getItems }
}

スキルセルフチェック

このレッスンの内容をどの程度理解できましたか？

弱点マップで全体を確認する

前のレッスン次のレッスン