Web

domiとは？ JavaScriptでWebページの構造と内容を制御するDocument Object Model基本解説

domiは、Document Object Modelを基にWebページの構造や内容をJavaScriptなどで操作する仕組みを示す用語です。

1998年にW3CよりDOM Level 1として勧告され、HTMLやXML文書の各要素にアクセスできるようになりました。

なお、各ブラウザ間での実装には差があり、互換性に注意する必要があります。

目次から探す

DOMの基本
- DOMの定義と役割
- DOMとWeb技術との関連性
DOMの歴史と背景
- DOM Level 1の誕生とW3Cによる規格化
- 当時のWebブラウザの状況
JavaScriptによるDOM操作
- DOMへの基本的なアクセス方法
- ノード操作とイベント管理の基礎
HTMLとXML文書への活用
- HTML文書におけるDOMの利用例
- XML文書でのDOM適用事例
ブラウザ間の互換性と実装差異
- 主なブラウザでの動作状況
- 実装上の留意点と差異の解説
まとめ

DOMの基本

DOMの定義と役割

DOMは「Document Object Model」の略で、Webページの内容や構造をプログラムから扱えるようにするための仕組みです。

DOMはHTMLやXML文書をツリー状のオブジェクトとして表現し、各要素が親子関係で結ばれている構造となっております。

この仕組みにより、以下のような操作が可能となります。

ページ内の特定の要素を取得する
取得した要素の内容や属性を変更する
新しい要素を作成し、ページに追加する

また、DOMはページ上で発生するユーザーの操作(クリックや入力など)のイベントを捕捉し、適切な処理を実行できるようにする役割も果たします。

DOMとWeb技術との関連性

DOMはHTMLと密接に関連しており、Webページ作成の基盤となる技術の1つです。

DOMを利用することで、JavaScriptは以下のような処理を実行できるようになります。

表示されるページ内容の動的な更新
ユーザー操作に応じたリアクションの実装
CSSと連携した動的なスタイル変更

さらに、DOMはWeb標準技術としてW3Cが規定しており、各ブラウザはこの仕様に基づいてDOMの実装を行っています。

そのため、HTML、XML、SVGなどのドキュメント全体で一貫した取り扱いができる点が強みです。

DOMの歴史と背景

DOM Level 1の誕生とW3Cによる規格化

DOM Level 1は1997年10月にドラフト仕様が公開され、1998年10月1日にW3Cにより正式に勧告されました。

このタイミングで、Webページの内容や構造に対してプログラムからアクセスするための統一的なAPIが確立されたため、多くの開発者が早期に有用性を認識しました。

W3CはDOMの仕様を策定し、HTMLとXMLの両方に対応する仕様を提供しました。
DOM Level 1は基本となるオブジェクトモデルおよび操作方法を定義し、その後の拡張や発展につながりました。
この規格化により、JavaScriptをはじめとするプログラミング言語からWebページを操作し、動的なコンテンツを生み出す環境が整いました。

当時のWebブラウザの状況

DOMが規格化された当時、主要なWebブラウザとしてはInternet ExplorerとNetscape Navigatorが存在していました。

両者は共にDOMにアクセスする仕組みを持っていましたが、その実装には以下のような違いが見受けられました。

Internet Explorerは独自のオブジェクトモデルを採用し、一部機能や動作が仕様と異なる部分がありました。
Netscape Navigatorは当初、DOM Level 1の仕様に沿った実装を試みましたが、すべての機能において完全な互換性を持つとはいかない状況でした。

これらの状況から、Web開発者は複数のブラウザでの動作を考慮してプログラムを書く必要があったことが分かります。

JavaScriptによるDOM操作

DOMへの基本的なアクセス方法

JavaScriptからDOMにアクセスするためには、代表的な以下のようなメソッドが利用されます。

例えば、ページ内の要素を取得する典型的な方法としては、次のようなコードが挙げられます。

var element = document.getElementById('exampleId');

document.getElementById() は指定したIDを持つ要素を返します。
document.getElementsByClassName() や document.getElementsByTagName() を用いることで、クラス名やタグ名で要素集合を取得することも可能です。

このような基本的なメソッドにより、DOM内の要素に対して直接操作を行える環境が整っております。

ノード操作とイベント管理の基礎

DOMでは、各要素は「ノード」として扱われ、ノードを利用した操作が行われます。

また、DOMは各種イベントを管理する仕組みも提供しているため、ユーザー操作に柔軟に対応することができます。

ノード操作では、要素の追加、削除、変更が可能です。
イベント管理では、ユーザーのクリック、マウスオーバー、キー入力などに対してコールバック関数が実行されます。

イベントリスナーを設定する代表的な方法は、以下のようになります。

var btn = document.getElementById('myButton');
btn.addEventListener('click', function() {
  console.log('ボタンがクリックされました');
});

要素選択と変更の手法

要素選択と変更に関しては、多くの手法が用意されています。

例えば、次のような手法で要素にアクセスし、内容を変更することができます。

要素セレクタを利用して対象を選択する
- document.querySelector() を利用して、CSSセレクタに基づく要素を取得します。
- 複数の要素が対象の場合は、document.querySelectorAll() が利用されます。

// CSSセレクタを利用して要素を取得
var header = document.querySelector('header');

取得した要素のテキストコンテンツや属性を変更する
- element.textContent を利用してテキストを更新します。
- element.setAttribute() を利用して属性値を変更します。

header.textContent = '新しい見出し';
header.setAttribute('data-role', 'header');

このような方法で、柔軟にDOM上の要素を操作することができます。

HTMLとXML文書への活用

HTML文書におけるDOMの利用例

HTML文書では、DOMを利用してページ構造の操作や動的なコンテンツの生成を行うことができます。

例えば、次のような利用例が考えられます。

ユーザーのアクションに合わせた内容の更新
- ボタンのクリックに応じて特定のセクションを表示する処理
動的なエレメントの追加
- フォームに入力された内容に基づいてリストを生成する処理

以下は、簡単な例として要素の追加処理のコードとなります。

var list = document.getElementById('itemList');
var newItem = document.createElement('li');
newItem.textContent = '新しいリスト項目';
list.appendChild(newItem);

この例では、createElement を利用して新たなリスト項目を生成し、appendChild を用いて既存のリストに追加しています。

XML文書でのDOM適用事例

XML文書でもDOMは有用な手段として扱われます。

XMLは構造化データを表現するためのフォーマットであり、DOMを利用することで、その内容を効率的に操作することが可能です。

XMLファイルをロードして解析することができる
特定のノードを検索し、必要な情報を抽出する処理が実現可能

以下は、XML文書を取得し、特定の要素にアクセスする例です。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.xml', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var xmlDoc = xhr.responseXML;
    var items = xmlDoc.getElementsByTagName('item');
    for (var i = 0; i < items.length; i++) {
      console.log(items[i].textContent);
    }
  }
};
xhr.send();

利用ケースの比較

HTMLとXMLでは、その利用ケースにいくつかの違いが見受けられます。

HTMLの場合は、ユーザーに表示される視覚的なコンテンツの更新が主な目的となる
- DOMの操作により、エフェクトやインタラクティブな要素を追加することが容易です。
XMLの場合は、データの取り扱いや構造の解析が主となります
- DOMを用いてデータの取り出しや更新を行うことで、バックエンドとのデータ連携が実現される場合が多いです。

これらの背景から、HTMLではユーザーインタフェースの操作、XMLではデータ管理のための操作がそれぞれ重要視されます。

ブラウザ間の互換性と実装差異

主なブラウザでの動作状況

主要なWebブラウザは、それぞれ独自の実装によりDOMの挙動が少しずつ異なります。

以下に各ブラウザでの特徴を簡単に整理します。

Google Chrome
- 最新のDOM仕様を積極的にサポートしており、一般的な操作は問題なく動作します。
Mozilla Firefox
- 標準規格に準拠した実装がされており、セキュリティ面やパフォーマンス面でも評価されています。
Microsoft Edge
- Chromiumベースとなっており、Chromeとほぼ同等の動作状況となっています。
Safari
- Apple独自の最適化が施されているため、標準に沿った動作と高速な描画が特徴です。

各ブラウザともDOMの基本操作は共通していますが、細かいイベント処理や一部のメソッドの動作において差異がある場合があります。

実装上の留意点と差異の解説

ブラウザ間の実装の違いにより、DOM操作を行う際にはいくつかの留意点があります。

イベントモデルの違い

例えば、Internet Explorerでは従来のイベント登録として attachEvent が利用されることがあり、他のブラウザの addEventListener とは異なる実装となっています。

ノード操作や属性の取り扱いの差異

一部のブラウザでは、ノードの削除や挿入に関して、予期せぬ動作が見受けられる場合があります。

そのため、ブラウザの互換性を意識した実装を検討することが重要です。

レンダリングエンジンによる違い

ブラウザごとに使用しているレンダリングエンジンが異なるため、DOM操作後の画面描画に微妙な差異が生じる場合があります。

こうした差異は、特に複雑なレイアウトや動的なアニメーション処理において顕著となることがあります。

これらの点を踏まえ、複数のブラウザでの動作確認や、必要に応じたポリフィルの利用、またはライブラリの導入によって互換性の問題に対処することが推奨されます。

まとめ

この記事では、DOM(Document Object Model)の基本的な定義や役割、Web技術との関わりについて解説しました。

1998年にW3C勧告されたDOM Level 1の歴史や、当時のブラウザの実装状況も触れ、JavaScriptによるDOMへのアクセス方法やノード・イベント操作の基礎を紹介しました。

さらに、HTMLとXML文書での活用例とブラウザ間の実装差異についてまとめ、各環境での留意点を説明しました。