How to create a DOM tree

出典: MDC

このページでは JavaScript において DOM Core API を用いて DOM オブジェクトを作成したり変更したりする方法を解説します。これはすべての Gecko ベースアプリケーション（Firefox など）で特権付きコード（拡張機能）でも特権なしコード（ウェブページ）でも利用できます。

[編集] DOM ツリーの動的作成

次の XML 文書を考えます。

<?xml version="1.0"?>
<people>
  <person first-name="eric" middle-initial="H" last-name="jung">
    <address street="321 south st" city="denver" state="co" country="usa"/>
    <address street="123 main st" city="arlington" state="ma" country="usa"/>
  </person>

  <person first-name="jed" last-name="brown">
    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
    <address street="123 west st" city="seattle" state="wa" country="usa"/>
    <address street="321 south avenue" city="denver" state="co" country="usa"/>
  </person>
</people>

次のように W3C DOM API を使うことでこの文書のインメモリ表現を作成することができます。Mozilla はこの API をサポートしています。

var doc = document.implementation.createDocument("", "", null);
var peopleElem = doc.createElement("people");

var personElem1 = doc.createElement("person");
personElem1.setAttribute("first-name", "eric");
personElem1.setAttribute("middle-initial", "h");
personElem1.setAttribute("last-name", "jung");

var addressElem1 = doc.createElement("address");
addressElem1.setAttribute("street", "321 south st");
addressElem1.setAttribute("city", "denver");
addressElem1.setAttribute("state", "co");
addressElem1.setAttribute("country", "usa");
personElem1.appendChild(addressElem1);

var addressElem2 = doc.createElement("address");
addressElem2.setAttribute("street", "123 main st");
addressElem2.setAttribute("city", "arlington");
addressElem2.setAttribute("state", "ma");
addressElem2.setAttribute("country", "usa");
personElem1.appendChild(addressElem2);

var personElem2 = doc.createElement("person");
personElem2.setAttribute("first-name", "jed");
personElem2.setAttribute("last-name", "brown");

var addressElem3 = doc.createElement("address");
addressElem3.setAttribute("street", "321 north st");
addressElem3.setAttribute("city", "atlanta");
addressElem3.setAttribute("state", "ga");
addressElem3.setAttribute("country", "usa");
personElem2.appendChild(addressElem3);

var addressElem4 = doc.createElement("address");
addressElem4.setAttribute("street", "123 west st");
addressElem4.setAttribute("city", "seattle");
addressElem4.setAttribute("state", "wa");
addressElem4.setAttribute("country", "usa");
personElem2.appendChild(addressElem4);

var addressElem5 = doc.createElement("address");
addressElem5.setAttribute("street", "321 south avenue");
addressElem5.setAttribute("city", "denver");
addressElem5.setAttribute("state", "co");
addressElem5.setAttribute("country", "usa");
personElem2.appendChild(addressElem5);

peopleElem.appendChild(personElem1);
peopleElem.appendChild(personElem2);
doc.appendChild(peopleElem);

XUL チュートリアルの DOM の章 も参照してください。

[編集] だから何 ?

DOM ツリーを XPath 式を用いてクエリすること や、文字列に変換すること、 XMLSerializer を用いてローカルあるいはリモートのファイルに書き出すこと（あらかじめ文字列に変換する必要はない）、ウェブサーバに POST すること（XMLHttpRequest 経由）、XSLT を用いて変換すること、XLink されることなど、さまざまな利用法があります。

RDF は適さない（あるいは RDF が嫌いなだけという場合でも）データを DOM ツリーを用いて作ることができます。別の応用例として、XUL は XML であるため、アプリケーションの UI を動的に操作したり、ダウンロードやアップロードをしたり、保存や読み込みをしたり、変換したりといったことがかなり簡単にできます。

[編集] 代用品

XUL アプリケーションにも HTML ページにも JavaScript を使用しており、HTML ページは Gecko ベースでないアプリケーション（Internet Explorer、Opera、Konqueror、Safari といったもの）で表示されることがあるという場合は、Sarissa を使用して DOM オブジェクトを作成するといいでしょう。Sarissa は XML 操作用の JavaScript ラッパです。

注意：document.implementation.createDocument() を使用して DOM オブジェクトを作成し、Sarissa のクラスやメソッドでそのオブジェクトを操作するということはしないでください。うまくいきません。必ず Sarissa を使って初期 DOM オブジェクトを作成してください。