目次

オブジェクトなJavaScriptの基礎講座

DOMってなに

◆ はじめに

従来のブラウザにおけるオブジェクトな視点は、ブラウザ自身でした。それは、ブラウザにとっては都合が良いものだったのですが...。 時代は、ブラウザそのものより、ブラウザで扱うXML文書やHTML文書(以下、HTML/XML文書)のデータとしての価値へと移ってきました。そして、その視点からのオブジェクトへアクセスするインターフェイスがW3Cで仕様検討され、ドキュメントオブジェクトモデル (Document Object Model - DOM)としてまとめられました。

◆ DOMとは

ドキュメントオブジェクトモデル (Document Object Model - DOM) は、HTML/XML文書にある入力フィールドやイメージ、段落など、すべての要素に対して参照/更新するための、また、ドキュメント主体の視点から見たオブジェクトへアクセスするためのインターフェイスなモデルです。

また、プラットフォーム中立言語中立インターフェイスであり,プログラムやスクリプトが,文書の内容・構造・スタイルに動的にアクセスしたり参照/更新することを可能にするものです。

つまり、あらゆるプログラミング言語に、HTML/XML文書の各部へのアクセスを提供するために、W3C によってインターフェイス仕様がまとめられたものです。W3C勧告のメソッドやプロパティを使う限り、どの言語を使っても、HTML/XML文書に対して参照/更新することができます。

尚、W3C DOM は Level1 と Level2 があり、Level1 では「Core」と「HTML」が、 Level2 では Level1 の DOM に加えて 「Views」, 「StyleSheets」, 「CSS」, 「Events」, 「Traversal」 そして「Range」 の6つのオブジェクトモデルが定義されています。詳細は W3C の文書や『おわりに』で紹介しているサイトを参照してください。

◆ DOMの特徴

DOMの特徴は何と言ってもHTMLの文書構造そのままということです。

例えば、HTMLの文書構造が、

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
    <title>sample</title>
    <style type="text/css">
    <!--
    body {
      background-color: white;
      text: bule;
    }
    -->
    </style>
    </head>
    <body>
    <h1>DOMはHTMLの構造そのもの! </h1>
    </body>

であったとすると、DOM構造(DOMツリー)は大体以下のようになります。

    HTMLDocument
      └ HTMLElement
           ├ HTMLHeadElement
           │   ├ HTMLMetaElement
           │   ├ HTMLTitleElement
           │   │   └ text(sample)
           │   └ HTMLStyleElement
           │        └ text(<!-- body { ... } -->)
           └ HTMLBodyElement
                └ HTMLHeadingElement
                     └ text(DOMはHTMLの構造そのもの!)

また、もう一つの特徴として各要素の属性値が内容に依存した型ではなく、文字列( DOMString )になっていることです。これは、今までのJavaScriptから使いやすいように設定された型だったのが、DOM では使用方法を想定せず、HTMLの文書構造表現に徹しているからです。

◆ おわりに

現在、従来のブラウザにおける視点からのオブジェクト(anchors,elements,forms,links等)と新たなDOMが混在していますが、HTML/XML文書オブジェクトの参照/更新に関しては、徐々にDOMへシフトしていくのが、これからの流れです。

本サイトの関連コンテンツ

参考サイト

最後にDOM関係の参考サイトを紹介いたします。どのサイトもすごく素晴らしいサイトですので是非アクセスしてみてください。

W3C DOM 仕様書原典

目次