Using the W3C DOM Level 1 Core

W3C の DOM Level 1 Core はドキュメントのコンテントツリーに手を加えるための強力なオブジェクトモデルであり、Mozilla Firefox や Microsoft Internet Explorer を含むすべての主要なブラウザでサポートされています。ウェブスクリプティングの未来を担う強力な基盤なのです。

コンテントツリーとは？

多くの HTML 作者達は HTML のことを平坦なものだと考えています。間にタグのあるテキストの固まりという感じで。しかしながら、HTML はもっと高度なものです。 HTML ドキュメントはすべて (あるいはこの点については SGML ドキュメントや XML ドキュメントもすべて)、木のような構造となってます。例えば、以下のドキュメントと木の構造は同じようなものです (同一ではありません。DOM における空白文字を参照)

<html>
<head>
  <title>My Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Paragraph</p>
</body>
</html>

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

Mozilla はドキュメントのパース時にコンテントツリーを構築し、それを使ってドキュメントを表示します。

木の構造を表現するのに使用されている用語が DOM Level 1 Core でも頻繁に出てきます。上の木に描いた個々の箱は木の中のノードです。ノードの上の線は親子関係を表しています。上のノードが親で、下のノードが子供です。従って同じ親の子供達は兄弟です。同様にして、祖先や子孫などといいます。(流石に従兄弟などとまではいいません)

DOM Level 1 Core で何ができるの？

W3C DOM Level 1 によって何でも好きな方法でコンテントツリーを変更できるようになります。任意の HTML ドキュメントを何もないところから構築できるくらい十分に強力なものです。これによりドキュメントの好きなところを好きな時にスクリプトから変更できます。 Webページの作者が DOM を動的に変更する上で最も簡単なのは、JavaScript を使用することです。 JavaScript であれば、古いブラウザでグローバルオブジェクトの document プロパティから操作していたのと同様にしてドキュメントを操作できます。この document オブジェクトは W3C DOM Level 1 仕様書の Document インターフェイスを実装しています。

簡単な例

上のドキュメントを元に作者は、ヘッダの内容を変え、1つある段落を 2 つに書き換えたいものとしましょう。これは以下のスクリプトによってできます。(Javascript 予約語、DOM による事前定義プロパティおよびメソッド、JavaScript コメント とそれぞれ強調表示しています)

// document.getElementsByTagName("H1") はドキュメント中の
// H1 要素の NodeList を返します。リストの最初の番号は 0 です。
var header = document.getElementsByTagName("H1").item(0);

// ヘッダの firstChild は Text ノードであり、テキストノードの
// data プロパティにテキストが含まれまれています。
header.firstChild.data = "A dynamic document";
// ここでヘッダは "A dynamic document" となります。

// 同様にしてドキュメント中の最初の P 要素 を取得します。
var para = document.getElementsByTagName("P").item(0);
// そしてそのテキストも変更します。
para.firstChild.data = "This is the first paragraph.";

// 2 つ目の段落のために新しい Text ノードを生成します。
var newText = document.createTextNode("This is the second paragraph.");
// 2 つ目の段落となる新しい要素を生成します。
var newElement = document.createElement("P");
// テキストを段落に与えます。
newElement.appendChild(newText);
// そして、BODY (段落の親)に付加することでドキュメントの
// 末尾に段落を付け加えます。
para.parentNode.appendChild(newElement);

このスクリプトは完成例としてもご覧になれます。

どうすればもっと学べるの？

DOM の基本概念に親しんでもらいましたが、DOM Level 1 の基本的なメソッドの説明をしている文書も用意しています。いわばこの文書の続編です。

W3C の DOM Level 1 Core 仕様書も参照して下さい。公式仕様ではありますが結構読みやすいです。特に各 DOM オブジェクトとその全プロパティ及びメソッドの説明が役立ちます。その他の DOM 関連文書も参照して下さい。

原文書の情報

著者: L. David Baron <dbaron at dbaron dot org>

Using the W3C DOM Level 1 Core

コンテントツリーとは？

DOM Level 1 Core で何ができるの？

簡単な例

どうすればもっと学べるの？

ドキュメントのタグと貢献者