S7 - IWP notes - XML DOM

XML DOM

<bookstore>
    <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author> Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
<bookstore>

The XML DOM defines a standard way for accessing and manipulating XML documents.

The DOM presents an XML document as a tree-structure.

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

"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 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

In other words: The XML DOM is a standard for how to get, change, add, or delete XML elements.

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

<?xml version="1.0" encoding="ISO-8859-1"?>
<bookstore>
  <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="web">
    <title lang="en">XQuery Kick Start</title>
    <author>James McGovern</author>
    <author>Per Bothner</author>
    <author>Kurt Cagle</author>
    <author>James Linn</author>
    <author>Vaidyanathan Nagarajan</author>
    <year>2003</year>
    <price>49.99</price>
  </book>
  <book category="web" cover="paperback">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>

·         The root node in the XML above is named <bookstore>. All other nodes in the document are contained within <bookstore>.

·         The root node <bookstore> holds four <book> nodes.

·         The first <book> node holds four nodes: <title>, <author>, <year>, and <price>, which contains one text node each, "Everyday Italian", "Giada De Laurentiis", "2005", and "30.00".

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!

XML DOM Parser

Most browsers have a built-in XML parser to read and manipulate XML.The parser converts XML into a JavaScript accessible object (the XML DOM).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.

Programming Interface

The DOM models XML as a set of node objects. The nodes can be accessed with JavaScript or other programming languages. In this tutorial we use JavaScript. Properties and methods define the programming interface to the XML DOM.

 Properties are often referred to as something that is (i.e. nodename is "book").

Methods are often referred to as something that is done (i.e. delete "book").

XML DOM Properties

These are some typical DOM properties:

• x.nodeName - the name of x
• x.nodeValue - the value of x
• x.parentNode - the parent node of x
• x.childNodes - the child nodes of x
• x.attributes - the attributes nodes of x

Note: In the list above, x is a node object.

XML DOM Methods

• x.getElementsByTagName(name) - get all elements with a specified tag name
• x.appendChild(node) - insert a child node to x
• x.removeChild(node) - remove a child node from x

Note: In the list above, x is a node object.

The JavaScript code to get the text from the first <title> element in books.xml:

Txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0]. nodeValue

After the execution of the statement, txt will hold the value "Everyday Italian"

Explained:

• xmlDoc - the XML DOM object created by the parser.
• getElementsByTagName("title")[0] - the first <title> element
• childNodes[0] - the first child of the <title> element (the text node)
• nodeValue - the value of the node (the text itself)

The XMLHttpRequest Object

The XMLHttpRequest object is used to exchange data with a server behind the scenes. The XMLHttpRequest object is a developer's dream, because you can:

• Update a web page without reloading the page
• Request data from a server after the page has loaded
• Receive data from a server after the page has loaded
• Send data to a server in the background

An example to fetch data from an XML data file using DOM parser

Data File: note.xml

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

HTML File to parse the document: data.html

<html>

<body>

<div>

<b>To:</b> <span id="to"> </span><br />

<b>From:</b> <span id="from"></span><br />

<b>Message:</b> <span id="message"></span>

</div>

<script type="text/javascript">

if (window.XMLHttpRequest)

  {    // code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.open("GET","note.xml", false);

xmlhttp.send();

xmlDoc=xmlhttp.responseXML;

document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;

document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;

document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;

</script>

</body>

</html>

 

DOM Node List Length

The length property defines the length of a node list (the number of nodes). You can loop through a node list by using the length property:

Example

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title");

for (i=0;i<x.length;i++)
  {
  document.write(x[i].childNodes[0].nodeValue);
  document.write("<br />");
  }

Example explained:

• Load "books.xml" into xmlDoc using loadXMLDoc()\
• Get all <title> element nodes
• For each title element, output the value of its text node

Book.xml file

<bookstore>

<book category="cooking">

<title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

<year>2005</year>

<price>30.00</price>

</book>

<book category="children">

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

<book category="web">

<title lang="en">XQuery Kick Start</title>

<author>James McGovern</author>

<author>Per Bothner</author>

<author>Kurt Cagle</author>

<author>James Linn</author>

<author>Vaidyanathan Nagarajan</author>

<year>2003</year>

<price>49.99</price>

</book>

<book category="web" cover="paperback">

<title lang="en">Learning XML</title>

<author>Erik T. Ray</author>

<year>2003</year>

<price>39.95</price>

</book>

</bookstore>

Output

Everyday Italian
Harry Potter
XQuery Kick Start
Learning XML

Node Properties

In the XML DOM, each node is an object. Objects have methods and properties that can be accessed and manipulated by JavaScript.

Three important node properties are:

• nodeName
• nodeValue
• nodeType

The nodeName Property

The nodeName property specifies the name of a node.

• nodeName is read-only
• nodeName of an element node is the same as the tag name
• nodeName of an attribute node is the attribute name
• nodeName of a text node is always #text
• nodeName of the document node is always #document

The nodeValue Property

The nodeValue property specifies the value of a node.

• nodeValue for element nodes is undefined
• nodeValue for text nodes is the text itself
• nodeValue for attribute nodes is the attribute value

Change the Value of an Element

The following code changes the text node value of the first <title> element:

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";

The nodeType Property

The nodeType property specifies the type of node. nodeType is read only. The most important node types are:

Node type	NodeType
Element	1
Attribute	2
Text	3
Comment	8
Document	9