Gecko DOM Reference:Introduction
出典: MDC
この節では、DOM に関しての簡単な概念的導入をします。それは何であり、HTML や XML の文書にどのように構造をもたらし、どのようにしてアクセスが可能であり、どのようにして参照される情報をこの API は提供するかと、そして例を示します。
目次 |
[編集] DOM とはなんでしょうか？
「 Document Object Model 」とは HTML や XML の文書のための API です。ウェブ開発者のために以下の２つのことをします。文書の構造的表現を提供し、そして、どのようにしてその構造がスクリプトからアクセス可能か定義します。スクリプトでは、ウェブページから、ノードの構造的集合として収得できます。このことはすぐ後で議論します。要するに、DOM はウェブページとスクリプトやプログラミング言語をつなぎます。
DOM は特定のアプリケーションや商品であったり、ウェブページに対する独自の命令ではないことに注意してください。むしろ、DOM は API であり、W3C の DOM の標準に従うのであれば、ベンダーが必ず実装しなくてはならないインターフェイスです。ひとつの小さな例を挙げると、すべての DOM をサポートするブラウザベンダーはウェブページ中のスクリプトから getElementsByTagName 関数が呼ばれたときは、 HTML ウェブページ中のすべての<p>要素をノードの配列として返さなければなりません。
paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);
ウェブ開発者がウェブページを操作したり、作成したりするために用意されているすべての属性、関数、イベントはオブジェクトとして提供されます。(例えば、ドキュメント自身を表現する document オブジェクトや、 HTML のテーブルにアクセスするための特別な HTMLTableElement DOM インターフェイスを実装した table オブジェクト、などなど). この文書はそれらの API のための、オブジェクト対オブジェクトのリファレンスを提供します。
[編集] DOM 対 JavaScript
このリファレンスでの例も同様に、上の小さな例は JavaScript で書かれています。つまり、JavaScriptで 書かれて いますが、しかし DOM を 利用 してウェブページとその要素にアクセスしています。DOM はプログラミング言語ではありません。しかし、DOM なしでは、ウェブページや XML ページやそれらが主にかかわる要素に関しての、モデルや概念を JavaScript は持っていません。ドキュメント中のすべての要素、ドキュメント全体・HEAD・ドキュメント中のテーブル・テーブルのヘッダー・テーブルセル中のテキストはそのドキュメントのドキュメントオブジェクトモデルの一部であり、それゆえ DOM と JavaScript のようなスクリプト言語を通してそれらすべてはアクセスし、操作できます。
DOM はいかなるプログラミング言語から独立して作られていて、一つの一貫した API から構造的な表現を作ります。このリファレンスでは、JavaScript に特別に焦点を当てますが、DOM の実装はいかなる言語でもできます。ここに、Python の例を挙げます。
# Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");
[編集] どのようにして DOM にアクセスするのでしょうか？
DOM を使い始めるには、何も特別なものは必要ありません。異なるブラウザは異なる DOM の実装をしています。そして、これらの実装の実際の DOM の規格への適応度はさまざまです。（この話題に関してはこの文書では避けます。）しかし、すべてのウェブブラウザはスクリプトからウェブページにアクセスできるように何らかの document object model を持っています。
インラインの >SCRIPT< 要素であろうとも、スクリプトを読み込む命令による方法でウェブページに埋め込まれていようとも、スクリプトを作れば、document や window 要素といったウェブページ中のさまざまな要素に対するに API をすぐに使い始めることが出来ます。それらの API でドキュメント自身を操作したり、ドキュメントの子要素を取り出したり出来ます。DOM でのプログラミングは以下のように簡単に出来ます。一つは、window オブジェクトの alert() 関数を利用し、警告メッセージを表示しています。より長い例はより洗練された DOM 関数を使い、実際に新しいコンテンツを作り出しています。
<body onload="window.alert('welcome to my home page!');">
JavaScript が定義されている >script< 要素のほかに、この JavaScript は新しい H1 要素を作り、その要素に文書を加え、文書の構文木に H1 要素を加えています。
<html>
<script>
// create a couple of elements
// in an otherwise empty HTML page
heading = document.createElement("H1");
heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
</script>
</html>
[編集] 重要なデータの種類
このリファレンスでは、様々なオブジェクトと種類をなるべく簡単な方法で説明します。しかし、API で渡される、注意しなければならないデータの種類はたくさんあります。簡潔さのために、この API リファレンスでの文法の例は nodes を element として、node の配列を nodeLists として、 (または、単純に elements)、さらに attribute node を単純に attributes として参照しています。
以下の表はこれらのデータの種類を簡単に説明しています。
document |
メンバ変数が document 型のオブジェクトを返すときは（例えば、element の ownerDocument 属性はそれが属する document を返します）、このオブジェクトはルート document オブジェクト自身です。[dom_doc_ref.html#1022427 DOM Document Reference] の章は document オブジェクトを説明しています。 |
element |
element は要素か DOM API のメンバ変数によって返される element 型のノードのことです。例えば、document.createElement() 関数はノードへのオブジェクトの参照を返すというより、むしろ単純に、この関数は DOM によってちょうど作られたばかりの element を返すと言います。
DOM の Element インターフェイスを実装した element オブジェクトとより基本の Node インターフェイスはこのリファレンスでは一緒にして含まれています。 |
nodeList |
nodelistとは、document.getElementsByTagName() などで返される要素の配列です。 nodeList 中の項目はインデックスを使って以下の２つの方法で収得できます。
この２つの方法は等しいです。最初の方法では、 |
attribute |
attribute がメンバ変数によって返されるときは（例えば、createAttribute() 関数など）、属性のための特別な（ただし、小さな）インタフェイスを実装したオブジェクトの参照を返します。属性は要素のように DOM 中のノードですが、要素ほどは使われません。 |
NamedNodeMap |
namedNodeMap は配列のようですが、名前とインデックスによって項目にアクセスされます。リストの中で特定の順序では並んでいないので、インデックスでアクセスするのはあまり便利な方法ではありません。この目的のために、NamedNodeMap は item() 関数を用意しており、NamedNodeMap から項目を追加・削除できます。 |
[編集] DOM インターフェイス
このガイドの目的は、抽象的なインターフェイスや継承や野暮ったい詳細な実装についての説明は最小限にし、その代わり、DOM の構文木を操作できるように、DOM でのオブジェクト、つまり、実際のことについて説明することです。ウェブプログラマの視点からでは、HTML FORM 要素から name 属性を HTMLFormElement を通して収得することと、厳密な意味では className 属性は HTMLElement から収得することにはたいてい差がありません。両方のケースともあなたの欲しい属性は単純に form オブジェクトの中にあります。
しかし、DOM にて実装されているオブジェクトとインターフェイスの関係は複雑なので、ここの節では、DOM の仕様での実際のインターフェイスとそれがどのように利用できるかについて少し説明しようと思います。
[編集] インターフェイス 対 オブジェクト
いくつかのオブジェクトでは一つのインターフェイスを実装しています。しかし、たいていは、 table オブジェクトなどのように複数のインターフェイスを実装しています。例えば、table オブジェクトでは、特別な HTML Table Element Interfaceを実装していて、そのインターフェイスは createCaption や insertRow といった関数を含んでいます。しかし、HTML の要素でもあるので、DOM element Reference の章で説明している、Element インターフェイスも実装しています。さらには、HTML の要素であるので、DOM である限り、ウェブページや XML ページのオブジェクトモデルを作り上げるノード木中のノードであるので、table 要素は Element が継承しているより基本の Node インターフェイスを実装しています。
次の例のように table オブジェクトの参照を入手したときは、知ることなく、このオブジェクトのこれら３つのインターフェイスをごく普通に交互に使います。
var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for(var i = 0; i < tableAttrs.length; i++){
// HTMLTableElement interface: border attribute
if(tableAttrs[i].nodeName.toLowerCase() == "border")
table.border = "1";
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";
[編集] DOM の中で核となるインターフェイス
この節では DOM の中で最もよく使われるインターフェイスを列挙します。API がここで何をしているか記述するのではなく、DOM の中で非常に良く使われる関数や属性をちょっと示すのが狙いです。これらよく使われる API はこの本の最後の [examples.html#998263 DOM の例]の章のより長い例の中で使われています。
document と window オブジェクトが一般的に DOM プログラミングの中で最もよく使われます。簡単に言うと、window オブジェクトはブラウザのようなものを表現し、document オブジェクトはドキュメントのルート自身です。Element は一般的なNode インターフェイスを継承していて、あわせてこの２つのインターフェイスはここの要素で使われる多くの関数と属性を提供します。前節での table オブジェクトの例のように、ここの要素はそれぞれが持つデータを扱うための特定のインターフェイスを持っています。
以下は、DOM を使うウェブや XML ページのスクリプトでよく使われる API の簡単な一覧です。
-
document.getElementById(id) -
element.getElementsByTagName(name) -
document.createElement(name) -
parentNode.appendChild(node) -
element.innerHTML -
element.style.left -
element.setAttribute -
element.element.getAttribute -
element.addEventListener -
window.content -
window.onload -
window.dump -
window.scrollTo
[編集] DOM の API を試してみましょう
この文書はあなたのウェブ開発において使えるそれぞれのインターフェイスにサンプルを提供しています。いくつかのケースでは、サンプルは完全な HTML ページであり、DOM アクセスは <script> 要素の中に入っており、スクリプトを起動するのに必要なユーザーインターフェイス（例えば、ボタン）はフォームの中に入っており、DOM が操作する HTML 要素は同様に列挙されています。この場合は、例を新しい HTML ドキュメントにカットアンドペーストし、保存し、ブラウザから例を走らせることができます。
しかし、いくつかのケースでは例はより簡潔です。HTML 要素のインターフェイスの基本的な関係を示すだけの例を走らせるために、インターフェイスがスクリプトから簡単にアクセスできるようなテストページを準備したいと思うかもしれません。以下の非常に簡単なウェブページはインターフェイスをテストする関数をおけるようにするヘッダー中の <script> 要素と、習得・設定・操作できる属性を持ったいくつかの HTML 要素と、ブラウザからこれらの関数を呼ぶのに必要なウェブのユーザーインターフェイスを提供しています。
あなたが興味のある DOM インターフェイスをテストするために、このテストページや似たようなものを作ることができますし、ブラウザ上でどのように動くか見れます。必要であれば test() 関数の中身を更新したり、もっとボタンを作ったり、必要な要素を追加したりできます。
<html>
<head>
<title>DOM Tests</title>
<script type="application/x-javascript">
function setBodyAttr(attr,value){
if(document.body) eval('document.body.'+attr+'="'+value+'"');
else notSupported();
}
</script>
</head>
<body>
<div style="margin: .5in; height="400"">
<p><b><tt>text</tt> color</p>
<form>
<select onChange="setBodyAttr('text',
this.options[this.selectedIndex].value);">
<option value="black">black
<option value="darkblue">darkblue
</select>
<p><b><tt>bgColor</tt></p>
<select onChange="setBodyAttr('bgColor',
this.options[this.selectedIndex].value);">
<option value="white">white
<option value="lightgrey">gray
</select>
<p><b><tt>link</tt></p>
<select onChange="setBodyAttr('link',
this.options[this.selectedIndex].value);">
<option value="blue">blue
<option value="green">green
</select> <small>
<a href="http://www.brownhen.com/dom_api_top.html" id="sample">
(sample link)</a></small><br>
</form>
<form>
<input type="button" value="version" onclick="ver()" />
</form>
</div>
</body>
</html>
例えば、ウェブページの色に影響する一連の属性のように、たくさんのインターフェイスを一つのページでテストするために、ボタンやテキストフィールドや他の HTML 要素を全部集めた似たようなテストページを作ることができます。以下のスクリーンショットはどのようにテストのためにインターフェイスが一緒にまとめられるかアイディアを示します。
図 0.1 DOM テストページの例
この例では、背景色 (bgColor) やハイパーリンクの色 (aLink) や文字色 (text) といった DOM からアクセス可能なウェブページの側面をドロップダウンメニューは動的の更新します。しかし、テストページをデザインし、あなたが読んだことに関してインターフェイスをテストすることは、どのように効果的に DOM を使うか学ぶ上で重要なことです。
このドキュメントのオリジナルはmozilla.orgにおいて英語で公布されています。 またドキュメントの管理の言語は現在も英語です。この日本語訳は、 利用者の利便のためにmozilla.org 和訳プロジェクトによって提供されたものです。 フィードバックは英語で、元の著者に送って下さい。 翻訳された文書の一覧は、現在以下のURLで見ることが出来ます。