How to Create a DOM tree: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(made grammatical changes and added notes about Sarissa)
m (cat redirect)
 
(3 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{extdev}}
Moved [http://developer.mozilla.org/en/docs/How_to_Create_a_DOM_tree here] (MDC).
 
[[Category:Redirects]]
This page describes how to use the [http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html DOM Core] API in JavaScript to create and modify DOM objects. It applies to all Gecko-based applications (such as Firefox) both in priviledged (extensions) and unpriviledged (web pages) code.
 
==Dynamically creating a DOM tree==
Consider the following XML document:
 
<pre>
<?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>
</pre>
 
The [http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html W3C DOM API], supported by Mozilla, can be used to create an in-memory representation of this document like so:
 
<pre>
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);
</pre>
 
See also [http://xulplanet.com/tutorials/xultu/dom.html DOM chapter] of XulPlanet's tutorial.
 
==So What?==
DOM trees can be [[XPath| queried using XPath expressions]], converted to strings or written to a local or remote files using [[Parsing and serializing XML | XMLSerializer]] (without having to first convert to a string), [[XMLHttpRequest | POSTed to a web server]], transformed using [[XSLT]], [[XLink]]'d to, etc.
 
You can use DOM trees to model data which isn't well-suited for RDF (or perhaps you just don't like RDF). Another application is that, since XUL is XML, the UI of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.
 
==Alternatives==
If you're writing JavaScript that is used in both XUL applications and HTML pages, and the HTML pages may be viewed in non-Gecko-based applications (such as Internet Explorer, Opera, Konqueror, Safari), you should consider using [https://sourceforge.net/projects/sarissa/ Sarissa]&mdash;a JavaScript wrapper for XML manipulation&mdash;to create DOM objects. <b>Note: Do not create a DOM object using <code>document.implementation.createDocument()</code> and then use [https://sourceforge.net/projects/sarissa/ Sarissa] classes and methods to manipulate that object.</b> It will not work. You must use [https://sourceforge.net/projects/sarissa/ Sarissa] to create the initial DOM object.
 
==Resources==
* [https://sourceforge.net/projects/sarissa/ Sarissa] - Sarissa is a cross-browser ECMAScript library for client side XML manipulation, including loading XML from URLs or strings, performing XSLT transformations, XPath queries and more. Supported: Gecko (Mozilla, Firefox etc), IE, KHTML (Konqueror, Safari).
 
[[Category:Example code]] [[Category:XML in JavaScript]]

Latest revision as of 14:57, 8 November 2006

Moved here (MDC).