XML DOM Introduction
The XML DOM defines a standard for accessing and manipulating XML.
What You Should Already Know Before you continue you should have a basic understanding of the following: •
HTML
•
XML
•
JavaScript
If you want to study these subjects first, find the tutorials on our Home page.
What is the DOM? The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents like XML and HTML: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The DOM is separated into 3 different parts / levels: •
Core DOM - standard model for any structured document
•
XML DOM - standard model for XML documents
•
HTML DOM - standard model for HTML documents
The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.
What is the HTML DOM? The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them. If you want to study the HTML DOM, find the HTML DOM tutorial on our Home page.
What is the XML DOM? The XML DOM is: •
A standard object model for XML
•
A standard programming interface for XML
•
Platform- and language-independent
•
A W3C standard
The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them. In other words: The XML DOM is a standard for how to get, change, add, or delete XML elements.
XML DOM Nodes
In the DOM, everything in an XML document is a node.
DOM Nodes According to the DOM, everything in an XML document is a node. The DOM says: •
The entire document is a document node
•
Every XML element is an element node
•
The text in the XML elements are text nodes
•
Every attribute is an attribute node
•
Comments are comment nodes
DOM Example Look at the following XML file (books.xml):
Everyday Italian Giada De Laurentiis 2005 <price>30.00 Harry Potter J K. Rowling 2005 <price>29.99 XQuery Kick Start James McGovern Per Bothner Kurt Cagle James Linn Vaidyanathan Nagarajan 2003 <price>49.99 Learning XML Erik T. Ray 2003 <price>39.95
The root node in the XML above is named
. All other nodes in the document are contained within . The root node holds four nodes. The first node holds four nodes: , <author rel="nofollow">, <year>, and <price>, which contains one text node each, "Everyday Italian", "Giada De Laurentiis", "2005", and "30.00".<br />
<br />
Text is Always Stored in Text Nodes A common error in DOM processing is to expect an element node to contain text. However, the text of an element node is stored in a text node. In this example: <year>2005</year>, the element node <year>, holds a text node with the value "2005". "2005" is not the value of the <year> element!<br />
<br />
XML DOM Node Tree<br />
<br />
The XML DOM views an XML document as a node-tree. All the nodes in the tree have a relationship to each other.<br />
<br />
The XML DOM Node Tree The XML DOM views an XML document as a tree-structure. The tree structure is called a node-tree. All nodes can be accessed through the tree. Their contents can be modified or deleted, and new elements can be created. The node tree shows the set of nodes, and the connections between them. The tree starts at the root node and branches out to the text nodes at the lowest level of the tree:<br />
<br />
The image above represents the XML file books.xml.<br />
<br />
Node Parents, Children, and Siblings The nodes in the node tree have a hierarchical relationship to each other. The terms parent, child, and sibling are used to describe the relationships. Parent nodes have children. Children on the same level are called siblings (brothers or sisters). •<br />
<br />
In a node tree, the top node is called the root<br />
<br />
•<br />
<br />
Every node, except the root, has exactly one parent node<br />
<br />
•<br />
<br />
A node can have any number of children<br />
<br />
•<br />
<br />
A leaf is a node with no children<br />
<br />
•<br />
<br />
Siblings are nodes with the same parent<br />
<br />
The following image illustrates a part of the node tree and the relationship between the nodes:<br />
<br />
Because the XML data is structured in a tree form, it can be traversed without knowing the exact structure of the tree and without knowing the type of data contained within. You will learn more about traversing the node tree in a later chapter of this tutorial.<br />
<br />
First Child - Last Child Look at the following XML fragment:<br />
<br />
<bookstore> <book category="cooking"> <title lang="en">Everyday Italian Giada De Laurentiis 2005 <price>30.00
In the XML above, the element is the first child of the <book> element, and the <price> element is the last child of the <book> element. Furthermore, the <book> element is the parent node of the <title>, <author rel="nofollow">, <year>, and <price> elements.<br />
<br />
XML DOM Parsing<br />
<br />
Most browsers have a build-in XML parser to read and manipulate XML. The parser converts XML into a JavaScript accessible object.<br />
<br />
Parsing XML The XML DOM contains methods (functions) to traverse XML trees, access, insert, and delete nodes. However, before an XML document can be accessed and manipulated, it must be loaded into an XML DOM object. The parser reads XML into memory and converts it into an XML DOM object that can be accessed with JavaScript.<br />
<br />
Load an XML Document The following JavaScript fragment loads an XML document ("books.xml"):<br />
<br />
var xmlDoc; xmlDoc=new window.XMLHttpRequest(); xmlDoc.open("GET","books.xml",false); xmlDoc.send(""); Code explained: •<br />
<br />
Create an XMLHTTP object<br />
<br />
•<br />
<br />
Open the XMLHTTP object<br />
<br />
•<br />
<br />
Send an XML HTTP request to the server<br />
<br />
Load an XML String The following code loads and parses an XML string:<br />
<br />
try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(txt); return xmlDoc; } catch(e)<br />
<br />
{ parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,"text/xml"); return xmlDoc; } Note: Internet Explorer uses the loadXML() method to parse an XML string, while other browsers use the DOMParser object.<br />
<br />
Access Across Domains For security reasons, modern browsers do not allow access across domains. This means, that both the web page and the XML file it tries to load, must be located on the same server. The examples on W3Schools all open XML files located on the W3Schools domain. If you want to use the example above on one of your web pages, the XML files you load must be located on your own server.<br />
<br />
XML DOM Load Functions<br />
<br />
The code for loading XML documents can be stored in a function.<br />
<br />
The loadXMLDoc() Function To make the code from the previous page simpler to maintain (and check for older browsers), it should be written as a function:<br />
<br />
function loadXMLDoc(dname) { var xmlDoc; if (window.XMLHttpRequest) { xmlDoc=new window.XMLHttpRequest(); xmlDoc.open("GET",dname,false); xmlDoc.send(""); return xmlDoc.responseXML; } // IE 5 and IE 6 else if (ActiveXObject("Microsoft.XMLDOM")) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.load(dname); return xmlDoc; } alert("Error loading document"); return null; } The function above can be stored in the <head> section of an HTML page, and called from a script in the page. The function described above, is used in all XML document examples in this tutorial!<br />
<br />
An External JavaScript for loadXMLDoc() To make the code above even easier to maintain, and to make sure the same code is used in all pages, we store the function in an external file. The file is called "loadxmldoc.js", and will be loaded in the head section of an HTML page. Then, the loadXMLDoc() function can be called from a script in the page. The following example uses the loadXMLDoc() function to load books.xml:<br />
<br />
Example <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> <script type="text/javascript"> xmlDoc=loadXMLDoc("books.xml"); code goes here..... </script> </body> </html><br />
<br />
How to get the data from the XML file, will be explained in the next chapters.<br />
<br />
The loadXMLString() Function To make the code from the previous page simpler to maintain (and check for older browsers), it should be written as a function:<br />
<br />
function loadXMLString(txt) { try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(txt); return xmlDoc; } catch(e) { try //Firefox, Mozilla, Opera, etc. { parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,"text/xml"); return xmlDoc; } catch(e) {alert(e.message)}<br />
<br />
} return null; } The function above can be stored in the <head> section of an HTML page, and called from a script in the page. The function described above, is used in all XML string examples in this tutorial!<br />
<br />
An External JavaScript for loadXMLString() We have stored the loadXMLString() function in a file called "loadxmlstring.js".<br />
<br />
Example <html> <head> <script type="text/javascript" src="loadxmlstring.js"></script> </head> <body> <script type="text/javascript"> text="<bookstore>" text=text+"<book>"; text=text+"<title>Everyday Italian"; text=text+"Giada De Laurentiis"; text=text+"2005"; text=text+""; text=text+""; xmlDoc=loadXMLString(text); code goes here.....