Web Kit DOM Programming Topics: JavaScriptからのドキュメントオブジェクトモデルの使用

JavaScriptドキュメントオブジェクトモデルは、W3C (World Wide Web Consortium)が策定したドキュメントオブジェクトモデル(DOM)仕様を実装しています。この仕様では、プログラムおよびスクリプトが、ドキュメント（通常はHTMLやXML）の要素に対応する構造化されたオブジェクト一式を提供することにより、ドキュメントの内容、構造、およびスタイルに動的にアクセスして変更することができる、プラットフォームと言語に依存しないインターフェイスを規定しています。

Level 2 DOMの仕様では特に、スタイルシートからオブジェクトツリーを作成し、ドキュメント要素のスタイルデータを処理する機能が追加されました。

ドキュメントオブジェクトモデルは、特に顕著なのはJavaScriptですが、多岐にわたる言語ですでに実装されています。JavaScript DOMにおける各宣言は、W3CのIDL (Interface Definition Language)ファイルを使って作成されました。

Contents:

DOMによるドキュメントの構造へのアクセス

ドキュメントオブジェクトモデルの主要な機能は、HTMLドキュメントの構造を、その中に含まれている内容から切り離して参照、アクセス、変更することです。特定のHTML要素に、id識別子に基づいてアクセスしたり、タグまたはCSSクラスタイプによって要素の配列を割り当てたりできます。すべての変換は、最新のHTML仕様に従って行われます。さらに重要なことに、変換は動的に行われます。つまり変換はすべてページを再ロードせずに行われます。

DOMツリーは完全にJavaScriptオブジェクトで構成されます。Table 1に、基本的でよく使われるJavaScriptオブジェクトのいくつかを示します。

**Table 1** よく使われるJavaScript DOMのタイプ
DOMオブジェクト	定義
`document`	ページのドキュメントオブジェクトを返します。DOMツリーのルートノードを表し、これに対する操作はページ全体に影響します。
`element`	DOMツリー内のほとんどの構造とサブ構造のインスタンスを表します。たとえば、テキストブロックを要素(element)とすることができます。また、HTMLドキュメントの `body`セクション全体を要素とすることが考えられます。
`nodeList`	`nodeList`は配列と同じですが、要素の格納に特化した配列です。nodeList内の項目には、`myList[n]`（`n`は整数）のような一般的な構文を通じてアクセスできます。

DOMによって指定され、その構造へのアクセスに使用できるいくつかのJavaScriptメソッドがあります。Table 2に、基本的な最もよく使われるJavaScriptメソッドのいくつかを示します。

**Table 2** よく使われるJavaScript DOMメソッド
DOMメソッド	親クラス	定義
`element` `getElementById(`id`)`	document、element	`id`識別子によって一意に識別される要素を返します。
`nodeList` `getElementsByTagName(`name`)`	document、element	nameで指定される特定のタグ（`p`や`div`など）を持つ任意の要素の`nodeList`を返します。
`element` `createElement(`type`)`	element	type（`p`や`div`など）で指定されるタイプの要素を作成します。
`void` `appendChild(`node`)`	element、node	nodeによって指定されるノードを、受け取り側のノードまたは要素に追加します。
`string` `style`	element	要素に結び付いているスタイル規則を文字列形式で返します。これを使って、`div.style.margin = "10px";`のような呼び出しによって、スタイル規則を設定することもできます。
`string` `innerHTML`	element	現在の要素と、その中のすべての内容を含んだHTMLを返します。これを使って、`element.innerHTML = "<p>test</p>";`のような呼び出しによって、要素のinnerHTMLを設定することもできます。
`void` `setAttribute(`name, value`)`	element	`id`属性や`align`属性など、受け取り側の要素の属性を追加（または変更）します。
`string` `getAttribute(`name`)`	element	nameによって指定された要素属性の値を返します。

ドキュメントオブジェクトモデルの使用

このセクションでは、ドキュメントオブジェクトモデルをよく理解するために、いくつかのコード例を紹介します。

DOMのコード例を使って作業するには、サンプルのHTMLファイルを作成する必要があります。次のコードは、以降の例で使用するHTMLファイルを示しています。

<HTML>

<HEAD>

    <TITLE>My Sample HTML file</TITLE>

</HEAD>

<BODY>

 <DIV id="allMyParas" style="border-top: 1px #000 solid;">

    <P id="firstParagraph">

        This is my first paragraph.

    </P>

    <P id="secondParagraph">

        This is my second paragraph.

    </P>

 </DIV>

</BODY>

</HTML>

使用するHTMLドキュメントを用意したので、これでいくつかのDOM変換を行う準備ができました。この最初の例では、DOMツリーのfirstParagraph要素と secondParagraph要素の後にパラグラフを1つ追加します。

もちろん、現時点ではパラグラフ内にテキストはありません。DOMを使うと、新しいパラグラフにテキストを追加することもできます。

囲んでいるdiv要素に下のマージンを追加する必要があるかもしれません。現在、上のマージンのみ設定されています。setAttributeでこれを行うこともできますが、その場合はgetAttributeで既存のstyle属性をコピーしてこれに追加し、その後setAttributeを使って送り返す必要が生じます。そのため、代わりにstyleブロックを使います。

最後に、囲んでいるdiv要素の中のすべてのパラグラフ要素のスタイルを変更したくなることなどが考えられます。nodeListを生成するgetElementsByTagNameメソッドを使って、パラグラフ要素の配列を取得し、配列全体に対して繰り返し処理を行うことができます。この例では、すべてのパラグラフにグレーの背景色を追加します。

JavaScriptドキュメントオブジェクトモデルとWeb KitベースのアプリケーションまたはDashboardウィジェットの組み合わせは強力です。たとえば、これらのスクリプトとマウスイベントやボタンクリックを結び付けることによって、自分のWebページ上や、DashboardウィジェットなどのWeb Kitベースのアプリケーション内に、非常に動的で可変性の高いコンテンツを作成することができます。

その他のリソース

次のリソースは、JavaScriptドキュメントオブジェクトモデルを使用する上で役立ちます。




	Get information on Apple products. Visit the Apple Store online or at retail locations. 1-800-MY-APPLE Copyright © 2007 Apple Inc. All rights reserved. \| Terms of use \| Privacy Notice