Unit 10

Contents Objective 10.0 Introduction 10.1 XML DOM Tree 10.2 Parsing XML DOM

XML DOM (Document Object Model)

10.2.1 Loading XML with Microsoft's XML Parser 10.2.2 XML Parser in Fire fox and Other Browsers 10.3 XML Properties and Methods 10.3.1 XML Methods 10.3.2 XML Properties 10.4 Examples 10.5 Summary 10.6 Terminal Questions 10.7 References Objective The XML Document Object Model (DOM) is a programming interface for XML documents. It defines the way an XML document can be accessed and manipulated. The XML DOM is a W3C Recommendation As a W3C specification, the objective for the XML DOM has been to provide a standard programming interface to a wide variety of applications. The XML DOM is designed to be used with any programming language and any operating system. With the XML DOM, a programmer can create an XML document, navigate its structure, and add, modify, or delete its elements.

10.0 Introduction to DOM

The process of taking a file and breaking it into its components is called parsing. The components are defined by a grammar, the rules of the language, although

this may be implied by the file structure rather than formally specified. Parsing is one of the commonest activities carried out by software. There are four parameters which can be used to categorize parsers. They may be validating, non-validating, stream-based, or tree-based. A validating parser uses both an XML file and a DTD to check that the XML adheres to the rules of the application. If the XML breaks the rules by straying from the DTD then the parser will create an error and stop processing the files. Non-validating parsers are much more tolerant. They only use the XML document and are quite content if it is wee formed. A well formed document is one which sticks to the general rules for XML such as having only one top-level element and no overlapping tags. The parser can operate using either a stream or a tree of data. Stream based parsers must read the entire document each time that an operation is requested and send a message to the controlling application when specific events occur. A tree based parser builds a static representation of the document which corresponds to the structure of the original XML. This tree may be updated by adding, removing, or modifying the nodes at run time. Two modules are commonly used for parsers: SAX and DOM. SAX parsers are used when dealing with stream of data. The SAX model is, though, unsuited to use on Web sites where repeated querying and updating of the XML document is required. In such cases a DOM based parser is the better. The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing XML documents. 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. The XML DOM is a standard for how to get, change, add, or delete XML elements.

10.1 XML DOM Node Tree:

In the DOM, every thing 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 texts in the XML elements are text nodes. Every attribute is an attribute node. Comments are comment nodes. 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:

Root element: <college>

Parent Attribute: firstname Element: <student>

Child Attribute: branch

Element: <sname>

Element: <sno>

Element: <smarks>

Element: <saddr>

10.0DOM NODE Tree

This is the XML (college.xml) file for the above DOM Tree <college> <student branch=cse> <sname firstname=h>Rama</sname> <sno>1</sno> <smarks>100</smarks> <saddr>Hyderabad</saddr> </student> <student branch=ECE> <sname firstname=r>sita</sname> <sno>1</sno> <smarks>80</smarks> <saddr>Delhi</saddr> </student> <student branch=EEE> <sname firstname=p>Rani</sname> <sno>1</sno> <smarks>80</smarks> <saddr>Puna</saddr> </student> </college>

10.2 Parsing the XML DOM:

All modern browsers have a build-in XML parser that can be used to read and manipulate XML. The parser reads XML into memory and converts it into an XML DOM object that can be accesses with JavaScript. There are some differences between Microsoft's XML parser and the parsers used in other browsers. The Microsoft parser supports loading of both XML files and XML strings (text), while other browsers use separate parsers. However, all parsers contain functions to traverse XML trees, access, insert, and delete nodes.

10.2.1 Loading XML with Microsoft's XML Parser

Microsoft's XML parser is built into Internet Explorer 5 and higher. The following JavaScript fragment loads an XML document ("college.xml") into the parser: XmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.load("college.xml"); Code explained:

The first line creates an empty Microsoft XML document object. The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded. The third line tells the parser to load an XML document called "college.xml.

The following JavaScript fragment loads a string called txt into the parser: xmlDoc=new ActiveXObject ("Microsoft.XMLDOM"); xmlDoc.async="false";

xmlDoc.loadXML(txt); Note: The loadXML () method is used for loading strings (text), load() is used for loading files.

10.2.2 XML Parser in Fire fox and Other Browsers:

The following JavaScript fragment loads an XML document ("college.xml") into the parser: xmlDoc=document.implementation.createDocument("","", null); xmlDoc.async="false"; xmlDoc.load("college.xml"); Code explained:

The first line creates an empty XML document object. The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded. The third line tells the parser to load an XML document called "college.xml".

The following JavaScript fragment loads a string called txt into the parser: parser=new DOMParser (); xmlDoc=parser.parseFromString(txt,"text/xml"); Code explained:

The first line creates an empty XML document object. The second line tells the parser to load a string called txt.

Note: Internet Explorer uses the loadXML () method to parse an XML string, while other browsers uses the DOMParser object.

Parsing an XML File - A Cross browser Example The following example loads an XML document ("college.xml") into the XML parser: <html> <body> <script type="text/javascript"> try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } catch(e) { try //Fire fox, Mozilla, Opera, etc. { xmlDoc=document.implementation.createDocument("","",null); } catch (e) {alert(e.message)} } try { xmlDoc.async=false; xmlDoc.load("college.xml"); document.write("xmlDoc is loaded, ready for use"); } catch(e) {alert(e.message)} </script> </body> </html>

OUTPUT: XmlDoc is loaded, ready for use

NOTE: save the above document with .html extension (i.e. d.html).And the xml file (i.e college.xml) must be saved in the same folder (i.e d.html and college.xml must be in the same folder). XML DOM Load Function: The code for loading XML documents can be stored in a function. The function described below, is used in all examples in this chapter. An XML Load Function - loadXMLDoc () 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. We use the loadXMLdoc function in all the programs. To make it simpler to maintain this code, it should be written as a function: function loadXMLDoc (dname) { try //Internet Explorer { xmlDoc=new ActiveXObject ("Microsoft.XMLDOM"); } catch(e) { try //Fire fox, Mozilla, Opera, etc. { xmlDoc=document.implementation.createDocument ("","", null); } catch(e) {alert(e.message)} } try {

xmlDoc.async=false; xmlDoc.load (dname); return (xmlDoc); } catch(e) {alert(e.message)} return(null); } The function above can be stored in the <head> section of an HTML page, and called from a script in the page. NOTE: The above javascript can be saved with the extension .js (i.e. loadxmldoc.js) An External Load Function To make the function above even easier to maintain, and to make sure the same code is used in all pages, it can be stored in an external file. We have called the file "loadxmldoc.js" The file can be loaded in the <head> section of an HTML page, and loadXMLDoc() can be called from a script in the page: <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> <script type="text/javascript"> xmlDoc=loadXMLDoc("college.xml"); document.write("xmlDoc is loaded, ready for use"); </script> </body> </html>

NOTE: The function described above, is used in all examples in this chapter An XML Load Function - loadXMLString() A similar function can be used to load an XML string (instead an XML file): 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)} } return(null); } To make the function above easier to maintain, and to make sure the same code is used in all pages, it can be stored in an external file. We have stored in a file called "loadxmlstring.js".

10.3 XML DOM - Properties and Methods

Properties and methods define the programming interface to the XML DOM. 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. The programming interface to the DOM is defined by a set standard properties and methods. Properties are often referred to as something that is (i.e. nodename is "student"). Methods are often referred to as something that is done (i.e. delete "student").

10.3.1 XML DOM Methods:

x.getChildNodes Returns a list of all of the children of the current node. This is returned as a Node List object which has its own methods. x.getFirstChild Returns the first child of the current node. x.getLastChild Returns the last child of the current node. x.getPreviousSibling Returns the node immediately before the current node x.getNextSibling Returns the node immediately after the current node x.getAttributes Returns a NamedNodeMap containing the attributes of the current node. x.insertBefore (newnode, refnode) Inserts the new node immediately before the current node which is passed as the refnode parameter.

 x.replaceNode (newnode, oldnode) Replaces the node in its second parameter with that in its first. x.removeChild (child) Removes the child node from the tree. x.appendChild (child) Appends the child to the end of the list of children of the current node. x.getElementsByTagName (tag) Returns all elements which have the name supplied as a parameter. To return all of the elements in a tree, use the parameter *. The parameter is a string which must be quoted.

10.3.2 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.

10.4 Examples
Example 1: Access a node using its index number in a node list. This example uses the getElementsByTagname () method to get the second <sname> element in "college.xml

<html> <head>

<script type="text/javascript" src="loadxmldoc.js"></script> </head> <body> <script type="text/javascript"> xmlDoc=loadXMLDoc("college.xml"); x=xmlDoc.getElementsByTagName("sname"); document.write(x[2].childNodes[0].nodeValue); </script> </body> </html> OUTPUT: Rani Example 2: This example uses the nodeType property to get node type of the root element in "college.xml". <html> <head> <script type="text/javascript" src="loadxmldoc.js"></script> </head> <body> <script type="text/javascript"> xmlDoc=loadXMLDoc ("college.xml"); document. write (xmlDoc.documentElement.nodeName); document. write ("<br />"); document.write(xmlDoc.documentElement.nodeType);

</script> </body> </html> OUTPUT: College 1 NOTE: The above two examples can be saved with the extension .html. Example 3: This example uses removeChild() to remove the text node from the first <sname> element. <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> <script type="text/javascript"> xmlDoc=loadXMLDoc("college.xml"); x=xmlDoc.getElementsByTagName("sname")[0]; document.write("Child nodes: "); document.write(x.childNodes.length); document.write("<br />"); y=x.childNodes[0]; x.removeChild(y); document.write("Child nodes: "); document.write(x.childNodes.length);

</script> </body> </html> OUTPUT: Childnodes: 1 Child nodes: 0

10.5 Summary
The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing XML documents. The DOM is an Application Program Interface (API) for XML document. The XML DOM is a standard object model for XML The XML DOM is a Platform-and language-independent The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them. The XML DOM is a standard for how to get, change, add, or delete XML elements. The XML DOM views an XML document as a tree-structure. The tree structure is called a node-tree. The parser reads XML into memory and converts it into an XML DOM object that can be accesses with JavaScript. x.getElementsByTagName (name) - get all elements with a specified tag name. Where x is a node object.

10.6 Terminal Questions:

1. What is DOM? Draw the DOM tree for emp.xml? 2. Write a program that uses the nodeValue property to change the text node of the first <sname> element in "college.xml 3. What is meant by parsing? Write a JavaScript fragment that loads an XML

document in to the Microsoft's XML parser? 4. What are the methods and properties of XML DOM? Explain with examples?

10.7 References
1. Internet &World Wide Web How to program -H.M.Deitel -P.J.Deitel -T.R.Nieto

2. Web Programming Building Internet Applications -Chris Bates

Web References: 1. Visit www.w3schools.com 2. Visit www.w3.org