【フロントエンド入門7】DOM操作の基礎とイベント処理｜動的なWebページを作る第一歩

Webページにインタラクティブな動作を追加するために欠かせないのがDOM（Document Object Model）操作とイベント処理です。ボタンを押したときに表示が変わったり、フォームに入力した内容をリアルタイムでチェックしたりする機能は、DOM操作とイベント処理によって実現されます。本記事では、DOMの基本構造、要素の操作方法、そしてイベント処理の基礎について初心者向けに解説します。

DOMとは何か？
1. DOMの定義と役割
DOM要素の取得方法
DOMの操作方法
イベント処理の基本
1. イベントリスナーの設定
2. よく使われるイベント
イベントの伝播と停止
1. イベントの伝播（バブリングとキャプチャリング）
結論

DOMとは何か？

DOMの定義と役割

DOM（Document Object Model）は、Webページの構造をツリー状に表現したものです。HTML文書の各要素（タグ）がツリー構造のノードとして表され、JavaScriptを使ってこれらのノードを操作することで、動的なページの更新が可能になります。

ドキュメントツリー：HTMLの構造をツリー状に表現したもので、親子関係を持っています。
JavaScriptとの連携：JavaScriptを使って、テキストの変更、要素の追加や削除、CSSの変更などがリアルタイムで行えます。

例：基本的なHTML構造

<!DOCTYPE html>
<html>
<head>
    <title>DOM操作の基本</title>
</head>
<body>
    <h1 id="main-title">こんにちは、世界！</h1>
    <button id="change-text">テキストを変更する</button>
</body>
</html>

このHTML構造をDOMツリーで見ると、<html>がルートノードとなり、その下に<head>と<body>が子ノードとして続きます。

DOM要素の取得方法

DOM操作をするためには、まず操作したい要素を取得する必要があります。JavaScriptにはさまざまな要素取得メソッドが用意されています。

getElementById

要素のid属性に基づいて1つの要素を取得します。

例

const title = document.getElementById("main-title");
console.log(title.textContent);  // こんにちは、世界！

この例では、id="main-title"の要素を取得し、そのテキスト内容をコンソールに表示しています。

querySelectorとquerySelectorAll

CSSセレクタを使って要素を取得できます。

querySelector：最初に見つかった1つの要素を取得
querySelectorAll：すべての該当する要素を取得

例

const button = document.querySelector("#change-text");
const paragraphs = document.querySelectorAll("p");

この例では、ボタン要素とすべての段落要素を取得しています。

他の取得メソッド

getElementsByClassName：クラス名に基づいて要素を取得
getElementsByTagName：タグ名に基づいて要素を取得

DOMの操作方法

要素を取得したら、次はその内容を操作します。DOM操作にはさまざまな方法があります。

テキストやHTMLの変更

`textContent`と`innerHTML`

textContent：要素内のテキストを変更します。
innerHTML：要素内のHTML構造を変更します。

例

const title = document.getElementById("main-title");

// テキストの変更
title.textContent = "こんにちは、JavaScript！";

// HTMLの変更
title.innerHTML = "<span style='color: red;'>JavaScriptで変更されました！</span>";

CSSスタイルの変更

要素のスタイルを動的に変更するには、styleプロパティを使用します。

例

const title = document.getElementById("main-title");

// 色とフォントサイズを変更
title.style.color = "blue";
title.style.fontSize = "32px";

要素の追加と削除

`appendChild`と`removeChild`

appendChild：親要素の末尾に新しい要素を追加します。
removeChild：親要素から子要素を削除します。

例

const newParagraph = document.createElement("p");
newParagraph.textContent = "新しい段落が追加されました。";

document.body.appendChild(newParagraph);  // 追加

イベント処理の基本

イベント処理とは、ボタンをクリックしたり、マウスを動かしたときに特定の処理を実行する仕組みです。イベントはユーザーがページ上で行った操作に基づいて発生します。

イベントリスナーの設定

JavaScriptでは、addEventListenerメソッドを使ってイベントを監視し、特定の処理を実行できます。

例：ボタンのクリックイベント

const button = document.getElementById("change-text");

button.addEventListener("click", function() {
    const title = document.getElementById("main-title");
    title.textContent = "ボタンがクリックされました！";
});

この例では、ボタンをクリックすると見出しのテキストが変更されます。

よく使われるイベント

click：クリック時に発生
mouseover：マウスが要素上に乗ったときに発生
keydown：キーボードのキーが押されたときに発生

例：キーボードイベント

document.addEventListener("keydown", function(event) {
    console.log("押されたキー: " + event.key);
});

この例では、ユーザーがキーボードを押すたびにそのキーの情報がコンソールに表示されます。

イベントの伝播と停止

イベントの伝播（バブリングとキャプチャリング）

イベントが発生すると、親要素にも伝わる「バブリング」や「キャプチャリング」と呼ばれる伝播が起こります。

バブリング：イベントが子要素から親要素に向かって伝わる（デフォルトの動作）
キャプチャリング：イベントが親要素から子要素に向かって伝わる

例：バブリングの確認

<div id="parent" style="padding: 20px; background-color: lightgray;">
    親要素
    <button id="child">子要素のボタン</button>
</div>

const parent = document.getElementById("parent");
const child = document.getElementById("child");

parent.addEventListener("click", function() {
    console.log("親要素がクリックされました。");
});

child.addEventListener("click", function(event) {
    console.log("子要素がクリックされました。");
    event.stopPropagation();  // 親要素への伝播を防止
});

この例では、子要素のクリック時に親要素への伝播を防いでいます。