本連載では,DOM(Document Object Model)を使ったJavaScriptの新しいコーディング手法について紹介していきます。

 近年,AJAXの台頭をきっかけに,JavaScriptを使ったブラウザのリッチ・クライアント化が進んできました。これまでは,サーバー側のプログラムでページを書き換えることで,ブラウザの表示に変化を与えてきました。しかし,現在では,ページの表示を変化させるだけであれば,ほとんどのことはJavaScriptのみで対処することが可能です。それを実現するのがDOMなのです。

 ブラウザのリッチ・クライアント化により,JavaScriptに求められる要求は,複雑さを増すばかりです。本連載では,DOMの基礎を学び,DOMならではのコーディング手法について紹介していきます。

 まず,第1回ではDOMとは何なのか,そしてDOMで何ができるのかを解説していきます。

DOMとは

 DOM(Document Object Model)とは,HTMLやXMLといったマークアップ言語へアクセスするためのAPI(Application Programming Interface)です。APIというと難しく聞こえるかもしれませんが,わかりやすく言えば,JavaScriptのようなプログラミング言語から,HTMLやXMLを操作するための方法を規定したものといえます。

<body>
  <h1>タイトル</h1>
  <p>文章1</p>
  <p>文章2</p>
</body>

 この単純なHTMLから,二つ目のP要素(タグ)をJavaScriptから参照したいとしましょう。具体的には,次のように二つ目のP要素を参照することができます。

var elm = document.getElementsByTagName('P').item(1);

 このコードを見て,だいたいの意味がつかめるのではないでしょうか。このコードでは,documentオブジェクト(HTML文書全体)から,getElementsByTagNameという命令(メソッド)を使ってP要素を取り出し,そのなかからitemという命令を使って,インデックス番号が1(上から数えて2番目)の要素を取り出しています。

 getElementsByTagNameやitemという命令のことをメソッドと呼びます。DOMでは,HTMLの要素を参照するために,様々なメソッドが規定されています。DOMを使うことで,HTML上のあらゆる要素に,JavaScriptからアクセスできるようになるのです。

DOMで扱う範囲

 DOMでは,HTML内の要素を特定する方法を規定していることを紹介しましたが,それ以外にもHTMLを操作するうえで必要な様々な規定があります。おおまかには,次のような規定に分類されます。

・Core
HTML/XMLの要素にアクセスするための方法を規定しています。

・HTML
HTMLに特化した要素へのアクセス方法を規定しています。

・Event
マウスクリックなどのイベントの扱い方を規定しています。

・Style
スタイルシートへのアクセス方法を規定しています。

 この分類を見ると,HTMLに関連するありとあらゆる要素にアクセスできることがおわかりかと思います。

 Core/HTMLの規定を使って,HTML上のタグを自由自在に操ることができるようになります。タグを消したり,書き換えたり,新たに追加することも可能です。極論を言えば,内容がないHTML文書に,JavaScriptだけで内容を作りこむことすら可能となります。Eventを使えば,マウスクリックやキーボードのキーを押したときに,アクションを加えることができるようになります。そしてStyleを使うことで,HTMLの見た目も自由に操作することができるようになります。

 DOMで何ができるのかを,何となくわかっていただけたのではないでしょうか。

DOMの歴史とW3C DOM

 DOMは,あくまでも概念的な用語でしかありません。実は,古くからどのブラウザでも,ある程度のDOMは実装されていました。

 皆さんはDHTML(ダイナミックHTML)という言葉が流行った時代(1990年後半)をご存じでしょうか。この時代は,どのブラウザでもDOMという概念は実装されていたものの,DOMでできることが限られており,さらに,ブラウザの種類によって,その利用方法がバラバラでした。

 DHTMLの時代では,ブラウザの種類やバージョンを判別するテクニックが良く紹介されていました。

if(navigator.appName == "Netscape") {
  /* Netscape Navigatorの場合 */
  var version = parseFloat(navigator.appVersion);
  if(version >= 4) {
    /* Ver4の場合 */
  } else {
    /* Ver4未満の場合 */
  }
} else if(navigator.appName == "Microsoft Internet Explorer") {
  /* Internet Explorerの場合 */
  var ua = navigator.userAgent;
  var offset = ua.indexOf("MSIE");
  var len = ua.indexOf(";", offset);
  var version = parseFloat(ua.substring(offset+5, len));
  if(version >= 5) {
    /* Ver5以上の場合 */
  } else if(version >= 4) {
    /* Ver4の場合 */
  } else {
    /* Ver4未満の場合 */
  }
} else {
  /* それ以外のブラウザの処理 */
}

 これによく似たコードをご覧になったことがあるでしょう。このようにブラウザやそのバージョンごとに場合分けを行い,それぞれで処理を記述しました。これは,DOMの使い方が,ブラウザごとで統一されていなかったためです。当時は,いかにブラウザの種類とバージョンを判別し,それぞれに応じたコードを書けるかが重要でした。そして,できる限りの条件文岐を行い,ブラウザごとに目的を達成することが,ある意味,Coolだったのです。

 しかし,このような状況は,コンテンツ制作者からみれば,混乱でしかありませんでした。同じ処理を実行するために,ブラウザやバージョンごとにコードを用意する必要があります。また,新たなブラウザや,新しいバージョンがリリースされるたびに,せっかく作ったJavaScriptコードを見直さなければいけません。

 このような状況の中で,WWWに関する技術標準を策定する団体「WWWコンソーシアム(W3C)」は,DOMの標準化に取り掛かります。1997年に策定作業が開始され,1998年に「DOM Level 1」が勧告されました。その後,大幅に機能の強化を図った「DOM Level 2」が2003年1月に勧告されました。そして,最新の「DOM Level 3」が2004年4月に勧告されました。定作業が開始されてから7年の歳月を経て,必要とされる仕様が一通り完成したことになります。

 W3C DOMでは『DOMとは,プログラムやスクリプトからダイナミックに,文書の内容・構造・スタイルにアクセスでき,そしてそれをアップデートできる,プラットフォームや言語に依存しないインタフェースである。』と説明されています。本連載ではJavaScriptをテーマに扱っていますが,W3C DOMは,プログラミング言語に依存しない規定として策定されています。実際には,JAVA,PHP,Perlといったなじみのプログラミング言語でも,書き方に違いはあるものの,W3C DOMをサポートしています。

Internet ExplorerはDOMの準拠が遅れている

 W3CがDOMを標準化したことで,近年のメジャーなブラウザは,ほとんどがW3C DOMに準拠するようになりました。つまり,ほとんど同じ書き方で,どのブラウザでも動作するという理想的な世界がやってきたことになります。

 JavaScriptでは,実行される環境がブラウザということもあり,W3C DOMの準拠度合はブラウザ次第ということになります。残念ながら,最もシェアが高いInternet Explorerが,W3C DOMの準拠が遅れているため,完全には同じコードで済ますことはできません。しかし,W3C DOMとほぼ同じことがInternet Explorerでも独自の方法で利用することが可能です。ある程度,複雑な処理になると,Internet Explorerとそれ以外のブラウザとで場合分けは発生します。本連載でも,Internet Explorerでも動作できる方法を紹介していきます。

 次回からは,DOMの具体的な使い方を解説していきます。次回は,DOMの基本となるドキュメントツリーという概念について解説していきます。