How to create a DOM tree

From MDC

本文介绍了如何使用javascript中的DOM CoreAPI来创建并修改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>

mozilla支持的W3C DOM 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表达式来访问、通过 XML串化器（XMLSerializer）（不经先转换成字符串）直接转换为一个字符串或写成本地/远程文件、通过 XMLHttpRequestPOST给一个web服务器、使用XSLT，Xlink来转换等等。

你可以使用DOM数来组织数据，这样做对RDF并不很适当（或许你只是不喜欢RDF）。另外一个应用是，由于XUL是XML，你应用程序的界面可以被动态地修改、下载、上传、保存、转换、或者方便的换化。

[编辑] 应选择适当的创建方法

如果你正在编写被同时用在XUL应用程序和HTML页面中的javascript，而且HTML页面可能会在不基于Gecko的应用程序中浏览（比如Internet Explorer, Opera, Konqueror, Safari），那么你应该使用Sarissa—一个用于处理xml的javascrpt包--来创建DOM对象。

注意:在使用Sarissa的类和方法操作对象时，不要使用document.implementation.createDocument()来创建那个对象。它将无法工作。你应该使用Sarissa来创建并初始化DOM对象。