JavaScriptのDOM操作とイベントハンドリング

概要

Webページを動的に変更するには、DOMの操作とイベントハンドリングが不可欠です。この章では、DOM要素の選択、変更、イベントの追加方法について学びます。

目次

  1. DOM要素の選択
  2. DOM要素の変更
  3. イベントリスナーの追加
  4. イベントオブジェクト
  5. イベントの伝播
  6. フォームの操作

1. DOM要素の選択

DOM要素は、document.querySelectorやdocument.querySelectorAllなどのメソッドを使用して選択できます。

const heading = document.querySelector("h1");
const buttons = document.querySelectorAll("button");

2. DOM要素の変更

選択したDOM要素の内容や属性を変更することができます。

heading.textContent = "新しい見出し";
buttons.forEach(button => {
  button.style.color = "blue";
});

3. イベントリスナーの追加

addEventListenerメソッドを使用して、DOM要素にイベントリスナーを追加できます。

buttons.forEach(button => {
  button.addEventListener("click", () => {
    console.log("ボタンがクリックされました！");
  });
});

4. イベントオブジェクト

イベントリスナーにはイベントオブジェクトが渡され、イベントの詳細にアクセスできます。

document.querySelector("#myInput").addEventListener("input", (event) => {
  console.log("入力値:", event.target.value);
});

5. イベントの伝播

イベントはキャプチャリングとバブリングのフェーズを持ち、DOMツリーを通じて伝播します。event.stopPropagation()を使用して伝播を止めることができます。

html
<div id="parent" style="padding: 20px; background-color: #f9f9f9;">
  親要素
  <div id="child" style="padding: 20px; background-color: #d9edf7;">
    子要素
  </div>
</div>
javascript
document.addEventListener('DOMContentLoaded', function() {
  // 親要素にイベントリスナーを設定
  document.getElementById('parent').addEventListener('click', function() {
    alert('親要素がクリックされました。');
  });

  // 子要素にイベントリスナーを設定
  document.getElementById('child').addEventListener('click', function(event) {
    alert('子要素がクリックされました。');
    // ここでイベントの伝播を停止
    event.stopPropagation();
  });
});

このコードでは、child要素をクリックすると、「子要素がクリックされました。」というアラートが表示された後、event.stopPropagation()によってイベントの伝播が停止されるため、「親要素がクリックされました。」というアラートは表示されません。これにより、特定の条件下で親要素にイベントが伝播するのを防ぐことができます。

6. フォームの操作

フォーム要素の値を取得し、送信イベントを管理することができます。

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  console.log("名前:", formData.get("name"));
});