HTML DOM チュートリアル：文書オブジェクトモデルを完全にマスターする

HTML DOM（文書オブジェクトモデル）は、プログラムやスクリプトが HTML ドキュメントの内容、構造、およびスタイルに動的にアクセスし、更新するためのインターフェースです。本記事では、HTML DOM の基本概念、主要なインターフェース、一般的な操作、イベント処理、および DOM と JavaScript を組み合わせて使用する方法について詳しく説明し、HTML DOM をより良く理解し活用する手助けをします。

1. HTML DOM 基本概念

2. 核心 DOM インターフェース

3. 一般的な DOM 操作

4. DOM イベント処理

5. JavaScript で DOM を操作する

JavaScript で DOM (Document Object Model) を操作することで、ウェブページの要素や内容を動的に変更できます。このガイドでは、基本的な DOM 操作から、要素の動的生成、フォームデータの処理方法までを詳しく説明します。

基本操作

JavaScript を使用して DOM を操作する基本的な方法を紹介します。これにより、ページ内の要素を取得、変更、削除できます。

要素の取得

要素を取得するためには、以下のメソッドを使用します。

• getElementById(id)：指定した ID を持つ要素を取得します。
• getElementsByClassName(className)：指定したクラス名を持つ要素のコレクションを取得します。
• getElementsByTagName(tagName)：指定したタグ名を持つ要素のコレクションを取得します。
• querySelector(selector)：指定した CSS セレクタに一致する最初の要素を取得します。
• querySelectorAll(selector)：指定した CSS セレクタに一致するすべての要素を取得します。

コード例:

// ID で要素を取得
const elementById = document.getElementById('myElement');

// クラス名で要素を取得
const elementsByClassName = document.getElementsByClassName('myClass');

// タグ名で要素を取得
const elementsByTagName = document.getElementsByTagName('div');

// CSS セレクタで要素を取得
const elementByQuery = document.querySelector('.myClass');
const elementsByQueryAll = document.querySelectorAll('p');

要素の変更

取得した要素の内容や属性を変更するためには、以下のプロパティやメソッドを使用します。

• innerHTML：要素の HTML コンテンツを変更します。
• textContent：要素のテキストコンテンツを変更します。
• setAttribute(name, value)：指定した属性の値を設定します。
• classList.add(className)：要素にクラスを追加します。
• classList.remove(className)：要素からクラスを削除します。

コード例:

// 要素の HTML 内容を変更
elementById.innerHTML = '<strong>新しい内容</strong>';

// 要素のテキスト内容を変更
elementById.textContent = '新しいテキスト';

// 属性を変更
elementById.setAttribute('data-custom', 'value');

// クラスを追加
elementById.classList.add('newClass');

// クラスを削除
elementById.classList.remove('oldClass');

要素の削除

要素を削除するには、親要素の removeChild メソッドや、要素自体の remove メソッドを使用します。

コード例:

// 親要素から子要素を削除
const parentElement = document.getElementById('parentElement');
const childElement = document.getElementById('childElement');
parentElement.removeChild(childElement);

// 要素を直接削除
const elementToRemove = document.getElementById('elementToRemove');
elementToRemove.remove();

動的に要素を作成して挿入

新しい要素を作成し、ページに追加する方法を説明します。これにより、ユーザーの操作に応じて動的にコンテンツを生成できます。

要素の作成

document.createElement メソッドを使って新しい要素を作成します。作成した要素は、appendChild や insertBefore メソッドを使って既存の要素に追加できます。

コード例:

// 新しい要素を作成
const newElement = document.createElement('div');
newElement.textContent = '新しい要素';

// 既存の要素に追加
const container = document.getElementById('container');
container.appendChild(newElement);

要素の挿入

作成した要素を特定の位置に挿入するには、insertBefore メソッドや appendChild メソッドを使用します。

コード例:

// 新しい要素を作成
const newElement = document.createElement('p');
newElement.textContent = '挿入されたパラグラフ';

// 特定の位置に挿入
const referenceElement = document.getElementById('referenceElement');
const container = document.getElementById('container');
container.insertBefore(newElement, referenceElement);

フォームデータの処理

フォームデータを処理するためには、フォーム要素にアクセスし、ユーザーが入力したデータを取得して利用します。

フォームデータの取得

フォーム要素の値を取得するには、value プロパティを使います。また、FormData オブジェクトを使ってフォーム全体のデータを取得することもできます。

コード例:

// 特定のフォーム要素から値を取得
const inputElement = document.getElementById('inputField');
const inputValue = inputElement.value;

// フォーム全体のデータを取得
const formElement = document.getElementById('myForm');
const formData = new FormData(formElement);

// フォームデータの各フィールドを表示
for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

フォームデータの送信

フォームデータをサーバーに送信するには、fetch API や XMLHttpRequest を使います。以下は fetch を使用した例です。

コード例:

// フォームデータを送信
fetch('https://example.com/submit', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log('成功:', data);
})
.catch(error => {
  console.error('エラー:', error);
});

まとめ

このガイドでは、JavaScript を使って DOM を操作する方法について説明しました。基本的な操作から、動的に要素を作成・挿入し、フォームデータを処理する方法までを詳しく解説しました。これにより、ウェブページの内容や構造を動的に変更し、ユーザー体験を向上させることができます。

参考記事

• HTML DOM Tutorial - W3Schools
• MDN Web Docs - Document Object Model (DOM)

よくある質問 (FAQ)

1. DOM と HTML の違いは何ですか？

DOM（文書オブジェクトモデル）は、HTML ドキュメントをプログラムが操作できるツリー構造として表現するインターフェースです。一方、HTML は文書のマークアップ言語で、DOM はその文書を操作するための手段です。

2. getElementById() メソッドの使い方を教えてください。

getElementById() メソッドは、指定した ID 属性を持つ HTML 要素を取得します。例：document.getElementById("myElement") は、ID が "myElement" の要素を返します。

3. DOM イベントのバブリングとは何ですか？

イベントのバブリングとは、イベントがターゲット要素から親要素へと順に伝播するメカニズムです。バブリングはデフォルトで有効であり、親要素に登録されたイベントハンドラーが呼び出されることがあります。