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 つに書き換えたいものとしましょう。これは以下のスクリプトによってできます。

HTML コンテンツ

<body>
<input type="button" value="Change this document." onclick="change()">
<h2>Header</h2>
<p>Paragraph</p>
</body>

JavaScript コンテンツ

  function change() {
    // document.getElementsByTagName("H2") は、文書内の <h2> 要素の NodeList
    // であり、最初のものは0番です。
    
    var header = document.getElementsByTagName("H2").item(0);
    // header の firstChild はテキストノードです。
    header.firstChild.data = "A dynamic document";
    // ヘッダーが "A dynamic document" になりました。
    
    var para = document.getElementsByTagName("P").item(0);
    para.firstChild.data = "This is the first paragraph.";
    
    // 第二の段落のために新しいテキストノードを生成します
    var newText = document.createTextNode("This is the second paragraph.");
    // 第二の段落になる新しい Element を生成します
    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>
  • 著作権情報: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license

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

タグ: 
このページの貢献者: mfuji09, kohei.yoshino, Mgjbot
最終更新者: mfuji09,