JavaScript/DOM

出典: フリー教科書『ウィキブックス(Wikibooks)』
移動先: 案内検索

DOM(ドム、Document Object Model、ドキュメント・オブジェクト・モデル)とは、プログラミング言語からHTMLドキュメントなどを扱うために標準化された仕様です。ウェブブラウザ上のJavaScriptにはDOM関連のプロパティやメソッドが組み込まれています。たとえばウェブブラウザ上に警告ダイアログを表示するwindow.alertメソッドもDOMの一部です。

概要[編集]

HTMLのscript要素を用いると、JavaScriptのプログラムをHTMLドキュメントの中に埋め込むことができます。

<!DOCTYPE html>
<html>
    <head>
        <title>Example Web Page</title>
    </head>
    <body>
        <div id="stdout"></div>
        <script type="text/javascript">
            var stdout = document.getElementById("stdout");
            stdout.innerHTML = "Hello, world!";
        </script>
    </body>
</html>

このHTMLドキュメントをJavaScriptに対応したウェブブラウザで表示すると、ウェブページ上に "Hello, world!" という文字列が表示されます。script要素の中に書かれているJavaScriptプログラムのソースコードに注目してください。

document.getElementByIdメソッドはDOMの一部で、HTMLドキュメントから指定したIDを持つ要素を抽出します。ここでは "stdout" というIDを持つ要素、すなわち<div id="stdout"></div>というdiv要素を参照し、要素オブジェクトをstdoutという変数に代入しています。

stdout.innerHTMLメソッドを使用するとdiv要素の中身を取得したり、設定したりすることができます。ここではstdout.innerHTML"Hello, world!" という文字列を代入しているので、div要素の中身は "Hello, world!" という文字列になります。

動的なWebページの操作[編集]

JavaScriptを学びたいと言う人間の多くは、おそらくよりダイナミックなWebページを作製したいという方だと思われる。

そこで、この項ではWebページの操作を行うための方法であるDOMプログラミングを解説する。

DOM (Document Object Model) の解説[編集]

DOM (Document Object Model) とはXML文書を読み込・加工・操作するためのデータ構造と、それを扱う方法を規格化したもので、XMLから派生したXHTMLや(ブラウザ上では)HTMLもその操作の対象となっている。

始めはJavaで実装・規格化されたため、XML黎明期はXMLを扱うならJavaという認識があった時期もあったが、現在ではほとんどの言語でDOMのプログラムインターフェースが整備されており言語の隔てなく、ほぼ同じ操作でXML文書を扱えるようになっている(代表的な言語でDOMが標準でバンドルされていないものはRubyくらいであるが、こちらはREXMLという、よりリッチなライブラリを積んでいる)。

DOMは、基本的にはオブジェクト指向的な扱いを考えながらも、Java以外にも多くの言語で動作することを期待して規格化されており、文法的には堅くやや面倒くさい記述法をしているが、Webブラウザ側でXMLを扱うための、ほぼ唯一の方法なので慣れる様努力して欲しい。

なお、DOMは現在では主流のブラウザほとんどで利用が出来るが、古いブラウザに関しては動かないものが多くある事を注意しておく(例としてはMicrosoftのInternetExplolerでは5.0以降で対応している)。

 サンプル[編集]

XML文書は、文書をタグで囲い込んでいるが、タグは必ず入れ子になるように書かれないといけないため必然的に囲っているタグと囲われているタグとの間に親子関係がある。 そして、複数のタグを子として取ることが出来るため、タグはツリー状に整理することが出来る。 DOMとはXML文書がツリー構造になる事を強く意識して作成されているライブラリ群である。

DOMは内部の動作原理が最初は想像をしにくいライブラリであるので、これを習得する際には実際にXML文書を読み込んで、それを操作しながら、動作とプログラムとの対応関係を頭の中に焼き付けてしまうのが一番良い方法だと思われる。

まずは、次のサンプルを打ち込んでほしい。

<html>
<head><title>DOMでのデータ取り出しテスト</title></head>
<body>
<div>
  <p>DOM TEST</p>
</div>
<script type="text/javascript"><!--
  alert( document.getElementsByTagName("body").item(0).getElementsByTagName("p").item(0).firstChild.nodeValue );
//--></script>
</body>
</html>

この文書では、(x)html文書中のbodyタグ内部に、divタグが埋め込まれており、さらにその中にpタグ。その中にテキスト文書が埋め込まれている。 ここから「DOM TEST」の文字列を読み出したい場合には、サンプルコードの様に記述をすればよい。

何故この様にするのかを逐次解説していく。 まず最初のdocumentを解説する。 これはwebページでの文書本体を示す参照であるが、ここにはXML文書の一番上の要素。つまり、(x)html文書ではhtml要素が格納されている。 そのため、展開された文書の本体からそのツリーの枝葉に当たる要素を順番に手繰ってゆく。 html要素の下にはhead要素とbody要素があるので、まずbody要素を取得するためにgetElementsByTagNameメソッドでbodyタグが幾つあるか調べる。 そしてbodyタグは1つしか存在しないので、取得できたbodyタグのリストの最初の要素を取得する。 ここまでくればあとの動作は簡単なので、同じようにdivタグ、pタグの中身をgetElementsByTagNameメソッドを使って手繰って行き、最後にpタグの中身の最初の中身、つまりは「DOM TEST」のテキストを取得している。

それぞれのメソッドの解説を行うと、

  • getElementsByTagName("タグ名")
自分の子要素から、名前の合うものを探してリストとして返す
  • item
リストから番号を指定して要素を取り出す
  • firstChild
自分の一番最初の子要素を返す
  • nodeValue
要素内のデータを取り出す

この様に、ツリーを上側から順番に手繰っていくことにより、目標の要素に辿り着いて、その後にそこの情報を読み出したり変更したりする。 そのため、DOMプログラムでは、自分が今XML文書内の何処にいるのかをイメージ出来る様になる事が重要である。

基本的単語の解説[編集]

DOMはその名の中にある「ドキュメント」「オブジェクト」「モデル」の名の通り、XMLの各部分をオブジェクト(モノ)として分割して、それぞれを参照して扱える様にする方法である。XML内部には、タグで区切られた数々のデータがあり、それぞれを種類分けしてプログラムで扱っている。その中でも特によく使うDOMのデータ型は次の3種類である。

  • Node(ノード)
何処のデータ型でも使う様な基本的な部分を扱っているので、後に理解すれば問題ない。
  • Element(要素)
HTMLのコードで書くなら、内部テキストのタグ部分に当たる。
  • Attribute(属性)
また、これはHTMLのコードで書くなら、
<img src="seen01.jpg" alt="海沿いの海岸" />
の「src="seen01.jpg"」や「alt="海沿いの海岸"」の部分に当たる。

最終的には、これらのデータのある、場所まで辿りついて、その部分のデータを加工する事を続けるのがJavaScriptによるWebプログラミングになる。

DOM-HTML拡張[編集]

DOMは、XMLを広くカバーする仕様となっているが、特にHTMLに関しての特別の拡張が行われており、簡潔な書式でHTMLの機能を呼び出せるようになっている。この拡張の中でよく使うのが次の2つである。

getElementById[編集]

document.getElementByIdはDOMプログラミングを実際に行う際に最もよく使う機能で、指定したIDのHTML要素を参照することが出来る。 具体的には、

 var elem = document.getElementById("sample");
 elem.firstChild.nodeValue = "てすと";
 

とする事で、sampleとidを打ったHTML要素の内部のテキストを置き換える事が出来る。

document.body[編集]

これは、実際に使用する際には、

 document.getElementsByTagName("body").item(0);
 

とまったく同じものである。

  • ノードの概念
    • DOM要素一覧
    • CDATAの説明

余談:メモリ内部でのDOMデータ[編集]

DOMを正しく使おうと思えば、最終的には何故、DOMの文法はこの様に出来ているのか? ということを理解する必要がある。DOMはXML文書を解析して、その内容をメモリ上に展開するとき、イテレーター同士がツリー状に繋がっている。既にJava等でデザインパターンを修得している上級者にはCOMPOSITE型を取っている、と言えば分かっていただけるであろう(分からない方はここは飛ばして良い)。DOMに存在する種々の「データ型」というのは、これの先にある様々な枝が何処でどう繋がれるのかを想像しながら使うものである。使っていく内に実感が追いついて慣れていくと思うが、初学者にはそこまでが単純ではないので頑張って欲しい。

DOMについての項に関しては、解説すべき項目が多く、とても扱いきれない部分があるので http://www.doraneko.org/misc/dom10/19981001/cover.html を参照のこと。

このページ「JavaScript/DOM」は、書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にノートへどうぞ。