Web開発において、DOM（Document Object Model）操作とイベント処理は欠かせないスキルです。
本記事では、DOMの基本概念から要素の取得・操作方法、さらにイベント処理までをわかりやすく解説します。
初心者から中級者まで役立つ知識を提供しますので、ぜひご活用ください。
1.DOM（Document Object Model）
DOMとは何か？
DOM（Document Object Model）は、HTMLやXML文書の内容をプログラムで操作するためのインターフェースを提供します。
Webブラウザは、HTMLやXML文書を読み込み、これをツリー構造のデータに変換します。
このツリー構造を DOMツリー と呼びます。
JavaScriptを使ってこのDOMツリーを操作することで、Webページの見た目や動作を動的に変化させることが可能になります。
DOMツリーの構造
HTML文書がどのようにDOMツリーに変換されるのか、以下のHTML例を元に詳しく説明します：
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<div id="sample">
<p>Hello, World!</p>
</div>
</body>
</html>このHTML文書は、以下のようなDOMツリーに変換されます：
#document
├── html
├── head
│ └── title
│ └── テキストノード: "Sample Page"
└── body
└── div#sample
└── p
└── テキストノード: "Hello, World!"各要素の役割
- #document:
文書全体を表すルートノード（最上位の親ノード）。 - html:
HTML文書全体を囲むルート要素。 - head:
メタデータ（例: <title>）を格納する要素。 - body:
ページの本体（ユーザーが見る内容）を表す要素。 - div#sample:
IDが「sample」である<div>要素。 - p:
Hello, World!というテキストを含む段落要素。
ノードには以下の種類があります：
- 要素ノード（Element Node）:
<div>や<p>などのHTMLタグ。 - テキストノード（Text Node）:
要素内のテキスト。
例えば、Hello, World!。 - 属性ノード（Attribute Node）:
要素が持つ属性（例: id="sample"）。
DOMの利点
DOMを活用することで、以下のような動的なWebページを実現できます：
- コンテンツの更新:
ページを再読み込みせずにテキストや画像を変更可能。 - インタラクティブ性の向上:
ユーザー操作（クリック、入力など）に応じてページを変化させることが可能。 - データの表示:
サーバーから取得したデータをリアルタイムで表示。
DOM操作の基礎例
以下は、JavaScriptを用いてDOMを操作する簡単な例です。
HTMLコード
<div id="greeting">こんにちは！</div>
<button id="changeText">テキストを変更</button>JavaScriptコード
const greeting = document.getElementById("greeting");
const button = document.getElementById("changeText");
button.addEventListener("click", () => {
greeting.textContent = "Hello, World!";
});このコードでは以下の操作を行っています：
- document.getElementById("greeting")で<div>要素を取得。
- addEventListenerを使い、ボタンがクリックされたときに処理を実行。
- textContentプロパティでテキストを変更。
結果として、ボタンをクリックすると「こんにちは！」が「Hello, World!」に変わります。
実践的な考察
DOMの概念を理解することで、次のような応用が可能になります：
- フォームのバリデーション:
入力内容をリアルタイムでチェック。 - アニメーション効果:
スクロールやクリックに応じて要素を動かす。 - 動的リストの生成:
ユーザー入力やデータに基づいてリストを生成。
2.要素の取得と操作
要素の取得方法
DOMツリー内の要素を取得するためのメソッドには、用途に応じてさまざまな選択肢があります。
以下に代表的なメソッドを解説します。
1. getElementById
特定のIDを持つ要素を取得します。
IDは文書内で一意である必要があるため、このメソッドは単一の要素を対象とする操作に適しています。
使用例
以下のHTMLを例に考えます：
<div id="sample">This is a sample.</div>この要素を取得して操作するには、次のコードを使用します：
const element = document.getElementById("sample");
console.log(element); // <div id="sample">This is a sample.</div>特徴
- 取得対象をIDで指定するため、非常にシンプルで高速。
- 文書内に同じIDが複数存在すると最初の一致要素が返されるが、基本的に一意であるべき。
2. querySelector
CSSセレクターを用いて、最初に一致する要素を取得します。
ID、クラス、タグなど、あらゆるセレクターを柔軟に使用できます。
使用例
以下のHTMLを対象に、段落要素を取得します：
<div id="sample">
<p>Hello, World!</p>
</div>const paragraph = document.querySelector("#sample p");
console.log(paragraph); // <p>Hello, World!</p>特徴
- CSSセレクターの知識がそのまま活用できるため、柔軟な要素指定が可能。
- 文書内で最初に一致した要素のみが返される。
補足：複数要素を取得する場合
複数の要素を取得する場合は、querySelectorAllを使用します。
このメソッドは一致するすべての要素をNodeListとして返します。
const items = document.querySelectorAll(".item");
items.forEach(item => {
console.log(item);
});要素の操作方法
取得した要素を操作することで、Webページの内容や見た目を動的に変更できます。
以下はよく使われるプロパティやメソッドの詳細です。
1. innerHTML
要素内のHTMLを取得または設定するために使用します。
文字列としてHTMLを直接書き換えられるため、柔軟な操作が可能です。
使用例
以下のHTMLを考えます：
<div id="sample">This is a sample.</div>
この内容を変更するコードは次のとおりです：const element = document.getElementById("sample");
element.innerHTML = "<p>こんにちは、世界！</p>";結果：
<div id="sample"><p>こんにちは、世界！</p></div>注意点
- HTML文字列を直接操作するため、悪意のあるスクリプトが混入しやすい（XSSのリスク）。
信頼できるデータのみを操作する場合に使用しましょう。
2. style
要素のインラインスタイルを直接変更します。
これにより、CSSで定義されたスタイルをプログラムから上書きできます。
使用例
element.style.color = "red";
element.style.fontSize = "20px";注意点
- styleプロパティはインラインスタイルのみを操作するため、CSSファイルのスタイルルールと競合する可能性があります。
クラス操作（後述のclassList）の使用も検討してください。
3. classList
要素のクラスを追加、削除、または切り替えるための便利なプロパティです。
クラスを使ったスタイル変更が効率的に行えます。
主なメソッド
1. add: クラスを追加する。
element.classList.add("highlight");2. remove: クラスを削除する。
element.classList.remove("highlight");3. toggle: クラスの有無を切り替える。
存在すれば削除、存在しなければ追加。
element.classList.toggle("hidden");4. contains: クラスを持っているかを判定する。
if (element.classList.contains("highlight")) {
console.log("ハイライトされています。");
}使用例
以下のHTMLを考えます：
<div id="sample" class="box">This is a sample.</div>クラス操作コード：
const element = document.getElementById("sample");
element.classList.add("highlight"); // "highlight"クラスを追加
element.classList.remove("box"); // "box"クラスを削除結果：
<div id="sample" class="highlight">This is a sample.</div>要素操作の実践例
以下のような操作を組み合わせることで、実際のWeb開発に役立つインタラクティブなUIを構築できます。
HTML例
<div id="message">Hello, World!</div>
<button id="changeButton">Change Text</button>JavaScript例
const message = document.getElementById("message");
const button = document.getElementById("changeButton");
button.addEventListener("click", () => {
message.textContent = "こんにちは、世界！"; // テキストを変更
message.style.color = "blue"; // スタイルを変更
message.classList.add("updated"); // クラスを追加
});CSS例
.updated {
font-weight: bold;
}ボタンをクリックすると、テキスト内容、色、クラスが変更されます。
3.イベントの追加と処理
addEventListenerによるイベントの追加
addEventListenerメソッドを使用すると、任意の要素にイベントリスナーを追加できます。
このリスナーは、指定されたイベントが発生したときに特定の処理を実行します。
基本的な使い方
以下の例は、ボタンをクリックした際にアラートを表示するシンプルなコードです。
HTML
<button id="button">クリックしてください</button>JavaScript
const button = document.querySelector("#button");
button.addEventListener("click", () => {
alert("ボタンがクリックされました！");
});解説
- document.querySelector("#button")で、HTML内のボタン要素を取得。
- addEventListenerメソッドを使い、"click"イベントにリスナー（処理）を追加。
- ボタンがクリックされると、リスナー内の関数が実行され、アラートが表示されます。
複数のイベントを登録する
同じ要素に対して複数のイベントリスナーを追加することも可能です。
button.addEventListener("click", () => {
console.log("クリックイベントが発生しました");
});
button.addEventListener("mouseenter", () => {
console.log("カーソルがボタンに乗りました");
});イベントリスナーの削除
不要になったイベントリスナーは、removeEventListenerメソッドを使って削除できます。
リスナーを削除するには、同じ関数を変数に代入して使用する必要があります。
function handleClick() {
alert("ボタンがクリックされました！");
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);イベントオブジェクトの利用
イベントリスナーに渡されるイベントオブジェクト（event）には、発生したイベントに関する詳細な情報が含まれています。
この情報を活用することで、より高度な操作が可能になります。
基本的な例
以下は、クリックされた要素（ターゲット要素）をログに出力する例です。
button.addEventListener("click", (event) => {
console.log(event.target); // クリックされた要素
});event.targetは、イベントが発生した具体的な要素を指します。
主なプロパティと活用例
1. target
イベントが発生した要素を取得します。
button.addEventListener("click", (event) => {
console.log(`クリックされたのは: ${event.target.tagName}`);
});2. type
発生したイベントの種類を取得します。
button.addEventListener("click", (event) => {
console.log(`イベントタイプ: ${event.type}`);
});3. preventDefault
イベントのデフォルト動作を無効化します。
例えば、リンクの遷移を無効化する場合：
const link = document.querySelector("#myLink");
link.addEventListener("click", (event) => {
event.preventDefault(); // デフォルトのリンク遷移を防止
console.log("リンクがクリックされましたが、遷移しません。");
});4. stopPropagation
イベントのバブルアップ（親要素への伝播）を防ぎます。
const outerDiv = document.querySelector("#outer");
const innerDiv = document.querySelector("#inner");
outerDiv.addEventListener("click", () => {
console.log("外側のDIVがクリックされました");
});
innerDiv.addEventListener("click", (event) => {
event.stopPropagation(); // 外側への伝播を防止
console.log("内側のDIVがクリックされました");
});実践的なイベント処理
入力フォームのリアルタイムバリデーション
HTML
<input type="text" id="nameInput" placeholder="名前を入力してください" />
<p id="feedback"></p>JavaScript
const input = document.querySelector("#nameInput");
const feedback = document.querySelector("#feedback");
input.addEventListener("input", (event) => {
const value = event.target.value;
if (value.length < 3) {
feedback.textContent = "名前は3文字以上で入力してください。";
feedback.style.color = "red";
} else {
feedback.textContent = "入力OK！";
feedback.style.color = "green";
}
});動作
- ユーザーが文字を入力するたびにinputイベントが発生します。
- 入力文字数に応じてリアルタイムでメッセージを更新します。
キーボードイベントの活用
HTML
<input type="text" id="textInput" placeholder="文字を入力してください" />JavaScript
const input = document.querySelector("#textInput");
input.addEventListener("keydown", (event) => {
console.log(`キーが押されました: ${event.key}`);
});
input.addEventListener("keyup", (event) => {
console.log(`キーが離されました: ${event.key}`);
});応用例
- ゲームのキー操作処理。
- 特定のショートカットキーで機能を実行する。
スクロールイベント
スクロール時に特定の要素を表示する例です。
HTML
<div id="content" style="height: 2000px;">
<p id="message" style="position: fixed; bottom: 10px; display: none;">スクロール中です！</p>
</div>JavaScript
const message = document.querySelector("#message");
window.addEventListener("scroll", () => {
message.style.display = "block";
clearTimeout(window.scrollTimeout);
window.scrollTimeout = setTimeout(() => {
message.style.display = "none";
}, 500); // スクロール停止後0.5秒で非表示
});まとめ
DOM操作とイベント処理を習得することで、Webページに対して自由自在なカスタマイズが可能になります。本記事で紹介した基本技術を活用し、動的でインタラクティブなWebコンテンツを作成してみてください。
