DOMを上手に使うWeb開発

Update : 09.05.2023 at 17:40 Post : 05.27.2015 at 10:00

こんにちは、ブランコでプログラマーをしている、矢野と申します。

Webに少しでも携わっている人向けに、知っている人は知っている、知らない人は知らない用語や技術を紹介して、Webと親しくなれるような記事を書いていきたいと思います。

今回はDOM（Document Object Model）について書きたいと思います。

WebページからWebアプリケーションの時代へ

DOM（Document Object Model）（ドムと呼びます）とはW3Cから勧告されている、HTMLをアプリケーションとして利用するためのAPI（仕様）です。1998年勧告のLevel1から2004年勧告のLevel3まであります。

DOMはHTMLを構成する見出しや文章、画像などを要素（ノード）として考えます。各要素は単体ではなく、入れ子になっている場合があります。文章の中にリンクがある場合や、リストの中に画像がある場合などです。

HTMLの構造を見てみると、bodyを親要素として見出し要素や文章要素などの子要素が複雑な入れ子になっています。このような構造をツリー（木）構造といいます。

DOMを使用すると、HTMLの各要素に対して、移動や追加、削除などの操作を行うことができます。それにより、HTMLをページとしてだけでなく、WebアプリケーションやWebゲームなどのような複雑な開発を行うことができるようになります。

DOMを操作するための言語

DOMを操作するための言語としてJavaScriptが有名です。以下にJavaScriptでのDOM操作を記述してみます。

//idがboxの要素を取得して、その要素の色を赤にする
var box = document.getElementById("box");
box.style.color = "#ff0000";

//idがbuttonの要素をクリックすると、アラートに「Hello world」と表示
var btn = document.getElementById("button");
box.addEventListener("click", function() {
	alert("Hello world");
});

//idがboxの要素を取得して、その要素の色を赤にする

var box = document.getElementById("box");

box.style.color = "#ff0000";

//idがbuttonの要素をクリックすると、アラートに「Hello world」と表示

var btn = document.getElementById("button");

box.addEventListener("click", function() {

alert("Hello world");

});

JavaScriptでHTML要素にアクセスする手段をDOMが提供します。DOMを操作するためにJavaScriptを使いますが、厳密にいうとDOMはJavaScriptの一部ではありません。

言語中立という立場

DOMはプログラミング言語に依存しない「言語中立」という立場で、仕様を定義しているのみで実装は各メーカーに委ねるという形をとっています。

それにより様々なデバイスやプログラミング言語でDOMをサポートできるようになります。DOMはJavaScript以外にもPHPやRuby、Javaなどのプログラミング言語でも採用されています。

メーカーの独自実装によるクロスブラウザ問題

各ブラウザはDOMを利用できるように実装しますが、DOMの仕様は強制力が無く、また仕様自体が不明確であったため、ブラウザメーカーは自社のブラウザに独自定義したDOM機能を実装するようになりました。

それにより、Internet Explorerでは動作するけど、Firefoxでは動作しないなどの非互換性が問題となり、開発者はブラウザ間の非互換性を埋めるために多大な労力を費やすことになりました。このようなことをクロスブラウザ問題といいます。

クロスブラウザライブラリの台頭

クロスブラウザ問題を解決する技術やノウハウを一つのライブラリとして統一しようとする動きが出てきました。

jQueryはその代表格として広く使われているJavaScriptライブラリです。jQueryを何となくご存知の人は、HTML要素に簡単にアクセスできたり、複雑なアニメーションを容易に実装できるものだというイメージがあると思いますが、普及する最大の要因はクロスブラウザ問題の解決でした。

jQueryのようなライブラリを使用することでDOMを詳しく知らなくてもWeb開発を行うことが可能となりました。

DOMを再評価する流れ

現在、各メーカーの最新ブラウザではW3Cが定めるDOMの仕様に準拠した実装を行っており、ブラウザ間の非互換性問題も解消され、ライブラリの必要性も無くなり、DOM自体が再評価されてきています。

DOMはライブラリを使用するより動作が軽量で、処理が早いという利点があります。しかし、ライブラリが持つ開発に必要なプラグインの豊富さも捨てがたいものです。

これからのWeb開発はDOMとライブラリを上手に使うことが求められてきていると思います。