Categories: JavaScript スタートブック

第4章: JavaScriptでのDOM操作とイベント

JavaScriptでWebページを動的に操作する際、DOM (Document Object Model) は欠かせません。DOMは、HTMLやXML文書の構造をJavaScriptで操作できるようにしたAPIで、ブラウザ上でリアルタイムに文書内容の更新やイベントハンドリングを可能にします。この章では、DOMの基本概念と操作から始まり、イベントリスナーの利用、そしてDOMの変更を伴うリアクティブなUI作成まで、JavaScriptを活用した具体的な実装方法について詳しく解説していきます。

4.1 DOMの基本概念と操作

4.1.1 DOMの構造

DOMは、WebページのHTML文書をツリー構造で表現します。各HTML要素は「ノード」としてツリーの一部を形成し、親子関係でリンクされています。この構造を操作することで、JavaScriptを使ってページ内容を変更したり、要素を追加・削除したりできます。たとえば、以下のようなHTML構造を考えてみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <div id="container">
    <h1>Hello, World!</h1>
    <p>Welcome to the world of DOM manipulation with JavaScript.</p>
  </div>
</body>
</html>

このHTMLは、containerというdiv要素にh1とp要素が子ノードとして存在するシンプルなDOMツリーです。JavaScriptでは、これらのノードにアクセスして、動的に内容を変更することができます。

4.1.2 DOM要素の取得

DOM要素を操作する第一歩は、JavaScriptから特定の要素にアクセスすることです。JavaScriptでは、さまざまなメソッドを使ってDOMの要素を取得できます。

document.getElementById('id')：指定されたidを持つ要素を取得します。
document.querySelector('selector')：指定されたCSSセレクタにマッチする最初の要素を取得します。
document.querySelectorAll('selector')：指定されたCSSセレクタにマッチするすべての要素を取得します。

以下に、上記のHTMLのh1要素を取得し、内容を変更するコード例を示します。

const heading = document.getElementById('container').querySelector('h1');
heading.textContent = "Hello, DOM!";

このコードでは、まずcontainerのdiv要素を取得し、その中の最初のh1要素を選択しています。その後、textContentプロパティを使用して、見出しの内容を変更しています。

4.1.3 DOM要素の操作

DOM要素を取得したら、次に要素の内容や属性を変更したり、新しい要素を追加したりできます。以下のプロパティとメソッドを使って操作します。

textContent：要素内のテキストを変更します。
innerHTML：HTMLマークアップを含むテキストを変更します。
setAttribute('attribute', 'value')：属性を設定します。
classList.add('class') / classList.remove('class')：クラスを追加・削除します。

以下に例を示します。

const paragraph = document.querySelector('p');
paragraph.textContent = "DOM操作に成功しました！";
paragraph.classList.add('highlight');

このコードでは、最初のp要素の内容を変更し、新たにhighlightというクラスを追加しています。

4.2 イベントリスナーとイベントハンドリング

DOM操作だけではなく、ユーザーの操作（クリックや入力など）に応じて、動的な処理を行うことがJavaScriptの醍醐味です。これを実現するためには、イベントリスナーとイベントハンドリングの知識が必要です。

4.2.1 イベントリスナーの設定

JavaScriptでは、addEventListenerメソッドを使って、DOM要素に対してイベントリスナーを設定できます。このメソッドは、次のように使用します。

element.addEventListener('event', function);

例えば、ボタンがクリックされたときに特定の処理を行いたい場合、以下のコードのようにclickイベントにリスナーを設定します。

<button id="myButton">Click me!</button>

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert("Button was clicked!");
});

このコードでは、myButtonというIDを持つボタンがクリックされると、アラートボックスが表示されます。

4.2.2 イベントの種類

イベントには多種多様な種類があり、それぞれのイベントによってハンドリング方法が異なります。主なイベントの種類と例をいくつか紹介します。

click：要素がクリックされたときに発生
mouseover：マウスポインタが要素に重なったときに発生
keydown：キーボードのキーが押されたときに発生
input：入力フィールドに変更があったときに発生

以下のコードでは、入力フィールドに文字が入力されるたびに内容が表示されます。

<input type="text" id="nameInput" placeholder="Type your name">
<p id="displayName"></p>

const input = document.getElementById('nameInput');
const displayName = document.getElementById('displayName');

input.addEventListener('input', function() {
  displayName.textContent = "Hello, " + input.value;
});

このコードにより、ユーザーがinputフィールドに文字を入力するたびに、displayNameの内容が更新されます。

4.3 DOMの変更とリアクティブなUI作成

ユーザーの操作に応じてページ内容を変化させることで、動的でインタラクティブなUI（ユーザーインターフェース）を作成することができます。ここでは、DOMの変更を伴うリアクティブなUIの作成方法を見ていきます。

4.3.1 新しい要素の追加と削除

JavaScriptでは、createElementメソッドを使って新しい要素を作成し、appendChildやremoveChildメソッドを使って要素を追加・削除できます。以下に、新しい項目をリストに追加するコード例を示します。

<ul id="taskList">
  <li>Task 1</li>
</ul>
<button id="addTask">Add Task</button>

const taskList = document.getElementById('taskList');
const addTaskButton = document.getElementById('addTask');

addTaskButton.addEventListener('click', function() {
  const newTask = document.createElement('li');
  newTask.textContent = "New Task";
  taskList.appendChild(newTask);
});

このコードでは、「Add Task」ボタンがクリックされるたびに、リストに新しいタスクが追加されます。

4.3.2 クラスの切り替えによるリアクティブUI

classListメソッドを使うと、要素のクラスを動的に変更してスタイルを切り替えることができます。以下に、クリックした際に要素の色を変えるコード例を示します。

<div id="colorBox" class="blueBox">Click me to change color</div>

const colorBox = document.getElementById('colorBox');

colorBox.addEventListener('click', function() {
  colorBox.classList.toggle('redBox');
});

このコードでは、colorBoxがクリックされるたびにクラスが切り替わり、スタイルが変化します（blueBoxとredBoxはあらかじめCSSで設定）

初心者におすすめ！プログラミングスクールのススメ

未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

プログラミングを始めたいと思っているそこのあなた、独学よりもプログラミングスクールが断然おすすめです！理由は簡単、続けやすさです。

独学の挫折率、驚きの87.5％！

独学でプログラミングを続けるのは、実はかなりハードルが高いんです。データによると、なんと87.5％もの学習者が途中で挫折しているとか。一方、各プログラミングスクールが公表しているデータによると、受講生の約95％が最後までやり抜いているとのこと。数字を見れば一目瞭然、プログラミングスクールの方が圧倒的に続けやすいんです。