The DOM and JavaScript

出典: MDC

目次 1 概観 2 JavaScript、Web スクリプト言語 3 Document Object Model、言語中立なインターフェース群 4 DOM と JavaScript - 何が何をしているのか? 4.1 説明

[編集] 概観

ページの周りをレイヤーが動く、レイヤーを見せたり隠したりする、メニューをポップアップする、などといった視覚効果は、しばしば "DHTML" あるいは「ダイナミック HTML」と呼ばれます。一部の人々は、見た目ではなく内容を処理するはずのこれらの技術の、ウェブページでの実際の使われ方に異議を唱えます。しかし事実として、今日もそのような使われ方が存在します。

私がこのプロジェクトで働き、多くのウェブ管理者と会って以来、ウェブデザインのコミュニティの大部分は、どのようにその DHTML が動作しているかを知らないという印象がありました。ほとんどの時間、彼らはスクリプトのリポジトリ (集約) サイトに赴き、自分たちの管理するウェブページにコピー&ペーストするだけでした。残念なことに、それらのサイトのほとんどは "JavaScript" と "DHTML" について語り、"DOM" について語ることは決してありません。DOM は昔からの概念でありながら、ごく最近になって "一般的なウェブデザイナー用語" の一部となった、というのが実情です。

それらのサイト管理者に、W3C DOM に基づくコーディングが、時に多くの労力をもたらし、旧来のブラウザのサポートを放棄することになるとしても、そうする価値があると納得させることは、Mozilla のようなプロジェクトにとって大きな挑戦です。また、W3C DOM のサポートに関して誠実であるという事実を得ることも、同様に大きな挑戦です。Netscape 6 は、Netscape 4 や Internet Explorer 向けの "JavaScript" を document.layers や document.all を使って書いていた無知なウェブデザイナーにとても非難されました。いつの日も私たちは、ニュースグループ、個人の E メール、あるいは Bugzilla で、人々が自分たちのサイトを可能な限り準拠させようとするのを助けるべく努力しています。私たちが直面している最も大きな問題の一つは、JavaScript、DHTML、DOM の混同です。これは、物事を整理し、これらの高級で有用な技術の関係を説明しようとする試みです。

[編集] JavaScript、Web スクリプト言語

JavaScript は、初め Netscape Communications 社で、今日では Mozilla プロジェクトのリーダーである Brendan Eich によって開発された「オブジェクトスクリプティング言語」です。Mozilla で用いられている JavaScript エンジンは SpiderMonkey というもので、これは ECMA-262 仕様第 3 版に忠実に作られています。JavaScript は ECMAScript としても知られています (詳しい解説はリンク先をご覧ください)。

よくある誤解に反して、JavaScript は「インタプリタ型の Java 言語」ではありません。一言で言えば、JavaScript は プロトタイプベースのオブジェクト構文をサポートした、動的なスクリプト言語です。基本的な構文は、この言語を習得するのに必要な新しい概念を減らすために、Java と C++ の両方にわざと似せてあります。JavaScript がすばらしいのは、(簡単な DHTML に必要なもののような) 基本的なプログラミングがしたいというときに、極めて簡単に学べるということです。変数型が目に見えない、文字列の扱いが簡単、全てのプラットフォームに中立、などなど。また、上級のプログラマーにとっては、オブジェクト指向言語と手続き型言語の両方として機能させられます。

この JavaScript についての文章の多くは Mozilla の JavaScript のページ から持ってきているものです。最新の ECMA 仕様はここで見ることができます。

[編集] Document Object Model、言語中立なインターフェース群

JavaScript が DOM オブジェクトを取り扱ったり、それらをプログラム的に操作できるようにするプログラミング言語であるのに対し、DOM は扱うドキュメントの部分部分を、検索したり、変更したり、更新したり、削除したりするプロパティやメソッドを提供します。例えば、DOM を使って HTML のあるテキスト入力ができるコントロールの値を文字列として検索することがあるかもしれません。この際に、その文字列を別の文字列と結合して意味の有る文にするために、(DOM ではなくて) JavaScriptの "+" 演算子を使ってもよい訳です。そして、ユーザへダイアログで文字列を表示するために DOM の "alert()" メソッドを使うでしょう。後でお見せする例の方もご覧ください。

例えばウェブサイトというものがスウェーデンの輸入家具だとすると、DOM はその家具のそれぞれの部品構成――棚、ボルト、六角棒レンチやねじ回し――のイラストであるといえます。部品の組立て方や部品の使い方の解説文はどんな言語でも書くことができますが、実際は自分が理解できる言語で書かれたものだけを使うことでしょう。説明書は、実際のオブジェクト (ブラウザのレンダリングエンジン) を示しているそのオブジェクトのイラスト (DOM) と、それらを参照するために書かれた解説文 (JavaScript) を使って、家具を組立てやすくしているのです。(Jonathan、喩えをありがとう!)

それでは DOM が謳う「言語中立」とは何でしょう? DOM にアクセスできるプログラミング言語が JavaScript だけなら、DOM はなぜ言語中立なのでしょうか? これは正しく言い得てはいません。例えば、Mozilla はそのユーザーインターフェースにおいて、内部的に C++ と JavaScript の両方において DOM を用いています。また、製作モジュールを用いて作成者がウェブページを作成する際に、閲覧中の HTML の挿入、変更、及び削除の手段として DOM を広く用いています。その他に知られている DOM の実装としては Perl、 Java、 ActiveX、 Python、があり、おそらく他にもあるでしょう。当然ながら、これは DOM の言語中立性のおかけでできるのです。

[編集] DOM と JavaScript - 何が何をしているのか?

このページのメインである「何が何をしているのか?」までようやく来ました。自分のウェブページに埋め込んだスクリプトのうち、いったい何が DOM で、何が JavaScript なのでしょうか? それでは簡単な例で見てみましょう。この例では "anchorTags" と名付けた NodeList 中の <a> タグを全て取得しています。そしてそれぞれのアンカータグ (anchorTags NodeList のそれぞれの要素) について、その "href" 属性の値をアラートダイアログで表示します。

青い部分が JavaScript で, 赤い部分が DOM です.

var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
   alert("Href of this a element is : " + anchorTags[i].href + "\n");
}

[編集] 説明

このコードの断片は、なにがコア JavaScript で、何が DOM であるかを示しています.

var anchorTags =

"anchorTags" という名前の JavaScript の変数を作っています。

document.getElementsByTagName("a")

Document インターフェイス は DOM1 Core で定義されている最初のインターフェイスで、document は Document インターフェイスを実装している主たるオブジェクトです。document はあなたのページ内にあるあらゆるものを保持しています。
DOM1 Core は Document インターフェイスにおいて getElementsByTagName() メソッドを定義しています。このメソッドは NodeList (ノードを格納する DOM 特有の配列) の形で、関数の引数に合致する全てのタグをページのソースで現れる順に取って来るものです。anchorTags 変数はここではもう NodeList です。

;

基本的な命令の終了のセミコロンです。JavaScript のものです。

for (var i = 0; i <

プログラミング言語における典型的な "for" ループです。これによって anchorTags NodeList に含まれるそれぞれのノードにアクセスすることができます。変数 "i" の宣言にも注目してください。これも JavaScript です。

anchorTags.length

DOM1 Core は NodeList インターフェイスにおいて length プロパティを定義しています。length プロパティは NodeList に含まれる Node の数を整数値で返します。JavaScript の配列にも length プロパティがあることにも注目してください。

; i++) {

典型的な JavaScript における変数のインクリメント演算です。

alert(

alert() は引数の文字列が入ったダイアログをポップアップする DOM のメソッドです。これは DOM レベル 0 あるいは DOM 0 と呼ばれるものの一部であるということに留意してください。DOM 0 はいくつかのブラウザでサポートされているインターフェイスの集合ですが、いかなる DOM 仕様にも含まれていません。

"Href of this a element is : " +

文字列リテラルと文字列結合演算子。JavaScript です。

anchorTags[i].href

"href" は DOM1 HTML 仕様で定義された HTMLAnchorElement インターフェイスのプロパティです。アンカー要素に href 属性があれば、その値を返します。
またここで、anchorTags[i] という JavaScript で配列の i 番目の要素にアクセスするのに用いるのと同じ構文を使っています。言語中立な "DOM 方式" で NodeList の各要素にアクセスするには、NodeList インターフェイスで定義されている item() メソッドを anchorTags.item(1).href のように用います。しかし大抵の JavaScript 実装では、単純な配列的構文を用いることができるようになっており、実際多くの人はその方法でコードを書いています。

+ "\n");

更に文字列を結合しています。最後に改行を追加しています。

}

"for" ループの終了。