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

ウェブページの動的な制御を学ぶ

1. はじめに

ウェブページはHTMLで構造が定義され、CSSで装飾されます。しかし、ユーザーの操作に応じて内容を変化させたり、アニメーションを加えたりといった動的な動きを実現するためには、JavaScriptが必要です。JavaScriptは、HTMLで記述されたウェブページの構造（DOM）を操作し、ユーザーの様々な行動（イベント）に反応することで、インタラクティブな体験を提供します。

このページでは、JavaScriptを使ってウェブページを動的に操るための基本である「DOM操作」と「イベントハンドリング」について、具体的なコード例を交えながら解説します。

2. DOM操作の基本

2.1. DOM（Document Object Model）とは？

DOMは、HTMLやXML文書のプログラミングインターフェースです。簡単に言うと、ウェブページ上のすべての要素（段落、見出し、画像、ボタンなど）をJavaScriptから操作できるように、オブジェクトのツリー構造として表現したものです。JavaScriptはこのDOMを通して、要素の追加、削除、変更などを行います。

DOMツリーの概念図
図1: HTMLとDOMツリーの対応（概念図）

HTMLコード： 


    
こんにちは

    
これはテキストです。
は、DOMでは以下のようなツリー構造として表現されます。

2.2. 要素の取得

DOMを操作する最初の一歩は、操作したいHTML要素をJavaScriptから「取得」することです。

代表的な要素取得メソッド:

例:

// IDが "myButton" の要素を取得
const myButton = document.getElementById('myButton');

// クラスが "item" のすべての要素を取得
const items = document.getElementsByClassName('item');

// CSSセレクタで最初の段落を取得
const firstParagraph = document.querySelector('p');

// CSSセレクタで全てのリストアイテムを取得
const allListItems = document.querySelectorAll('ul li');

2.3. 要素の作成・追加・削除

既存の要素を操作するだけでなく、新しい要素を作成してページに追加したり、不要な要素を削除したりすることもできます。

例:

// 新しい段落要素を作成
const newParagraph = document.createElement('p');
newParagraph.textContent = '新しく追加されたテキストです！';

// IDが "container" の要素を取得
const container = document.getElementById('container');

// containerの子要素として新しい段落を追加
container.appendChild(newParagraph);

// 追加した段落を削除
// container.removeChild(newParagraph);

2.4. 要素の内容・属性・スタイルの変更

取得した要素のテキスト内容、HTML内容、属性、そしてスタイルをJavaScriptから変更することができます。

例:

const heading = document.getElementById('myHeading');
const image = document.getElementById('myImage');

// テキスト内容を変更
heading.textContent = '新しいタイトル！';

// HTML内容を変更（HTMLタグも認識される）
// heading.innerHTML = '新しいタイトル！';

// 画像のsrc属性とalt属性を変更
image.setAttribute('src', 'images/new-image.jpg');
image.setAttribute('alt', '新しい画像');

// スタイルを直接変更
heading.style.color = 'blue';
heading.style.fontSize = '24px';

// クラスリストを操作
heading.classList.add('highlight'); // highlightクラスを追加
// heading.classList.remove('highlight'); // highlightクラスを削除
// heading.classList.toggle('active'); // activeクラスをトグル

3. イベントハンドリングの基本

3.1. イベントとは？

イベントとは、ウェブページ上で発生する様々な出来事のことです。例えば、ユーザーがボタンをクリックする、マウスカーソルが要素の上を通過する、キーボードのキーを押す、ページが読み込まれる、フォームが送信される、など多岐にわたります。

JavaScriptでは、これらのイベントが発生した際に、特定の処理を実行するように設定することができます。これを「イベントハンドリング」と呼びます。

イベントフローの概念図
図2: イベントの発生とイベントリスナー（概念図）

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

要素にイベントが発生したときに実行される関数（イベントハンドラ）を設定するには、addEventListener()メソッドを使用するのが一般的です。 

要素.addEventListener('イベント名', 関数);

例:

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

// クリックイベントが発生したら、指定された関数を実行
myButton.addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

// アロー関数を使った例
myButton.addEventListener('mouseover', () => {
    console.log('マウスがボタンの上に乗りました！');
});

3.3. よく使われるイベントの種類

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

イベントリスナーに渡される関数は、通常、イベントに関する情報を持つ「イベントオブジェクト」を引数として受け取ります。このオブジェクトには、発生したイベントの種類、ターゲット要素、マウスの座標、押されたキーなどの情報が含まれています。

例:

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

myLink.addEventListener('click', (event) => {
    event.preventDefault(); // デフォルトのリンク遷移を阻止
    alert('リンクがクリックされましたが、ページ遷移はしません！');
    console.log('クリックされた要素:', event.target);
});

const myInput = document.getElementById('myInput');
myInput.addEventListener('keydown', (event) => {
    console.log('押されたキー:', event.key);
    console.log('キーコード:', event.keyCode); // 非推奨だがまだ使われる
});

4. 実践例

これまでに学んだDOM操作とイベントハンドリングを組み合わせて、いくつかの実践的な例を見てみましょう。

4.1. ボタンクリックでテキストを変更

「テキスト変更」ボタンをクリックすると、下のテキストが切り替わります。

ここにあるテキストが変化します。



ここにあるテキストが変化します。



// JavaScript (script.js)
document.addEventListener('DOMContentLoaded', () => {
    const changeTextButton = document.getElementById('changeTextButton');
    const changeTextParagraph = document.getElementById('changeTextParagraph');
    let toggle = true;

    changeTextButton.addEventListener('click', () => {
        if (toggle) {
            changeTextParagraph.textContent = 'テキストが変更されました！';
        } else {
            changeTextParagraph.textContent = '元のテキストに戻りました。';
        }
        toggle = !toggle; // true/falseを切り替え
    });
});

4.2. 画像の表示/非表示をトグル

「画像表示/非表示」ボタンをクリックすると、画像が現れたり消えたりします。 






.hidden {
    display: none;
}

// JavaScript (script.js)
document.addEventListener('DOMContentLoaded', () => {
    const toggleImageButton = document.getElementById('toggleImageButton');
    const toggleImage = document.getElementById('toggleImage');

    toggleImageButton.addEventListener('click', () => {
        toggleImage.classList.toggle('hidden'); // hiddenクラスをトグル
    });
});

4.3. フォーム入力内容をリアルタイムで表示

下の入力フィールドに何か入力してみてください。入力内容がリアルタイムで下に表示されます。

入力内容: 





入力内容: 


// JavaScript (script.js)
document.addEventListener('DOMContentLoaded', () => {
    const liveInput = document.getElementById('liveInput');
    const displayInput = document.getElementById('displayInput');

    // 'input'イベントは入力内容が変更されるたびに発生
    liveInput.addEventListener('input', () => {
        displayInput.textContent = liveInput.value;
    });
});

5. TODOリストの追加と削除

ここでは、JavaScriptを使ったDOM要素の動的な追加と削除を体験してみましょう。下の入力欄に新しいTODOアイテムを入力し、「追加」ボタンをクリックしてみてください。リストにアイテムが追加され、各アイテムの右側にある「削除」ボタンでそのアイテムを消すことができます。 





    



// JavaScript (script.js)
document.addEventListener('DOMContentLoaded', () => {
    const todoInput = document.getElementById('todoInput');
    const addTodoButton = document.getElementById('addTodoButton');
    const todoList = document.getElementById('todoList');

    if (addTodoButton && todoInput && todoList) {
        addTodoButton.addEventListener('click', () => {
            const todoText = todoInput.value.trim(); // 前後の空白を除去

            if (todoText !== '') { // 空文字列でなければ追加
                // 1. 新しい 
  •  要素を作成
                const listItem = document.createElement('li');
                listItem.classList.add('todo-item'); // スタイリング用にクラスを追加

                // 2. テキストと削除ボタンを含む span を作成
                const todoTextSpan = document.createElement('span');
                todoTextSpan.textContent = todoText;

                const deleteButton = document.createElement('button');
                deleteButton.textContent = '削除';
                deleteButton.classList.add('delete-button'); // スタイリング用にクラスを追加

                // 削除ボタンにクリックイベントリスナーを追加
                deleteButton.addEventListener('click', () => {
                    // 親要素 (li) をリスト (ul) から削除
                    todoList.removeChild(listItem);
                });

                // 3. li の中にテキストとボタンを追加
                listItem.appendChild(todoTextSpan);
                listItem.appendChild(deleteButton);

                // 4. ul リストに li を追加
                todoList.appendChild(listItem);

                // 5. 入力フィールドをクリア
                todoInput.value = '';
            } else {
                alert('TODOアイテムを入力してください！');
            }
        });

        // (オプション) Enterキーで追加できるようにする
        todoInput.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                addTodoButton.click(); // ボタンクリックイベントをトリガー
            }
        });
    }
});