Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 1 of 44 Objectives In this lesson, you will learn to: *Identify the need for XML Document Object Model (DOM) * Use the following XML DOM objects to access different parts of an XML document: 3DOMDocument 3IXMLDOMNode 3IXMLDOMNodeList 3IXMLDOMParseError

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 2 of 44 The XML Document Object Model * The Document Object Model (DOM) defines the logical structure of documents and the way a document is accessed and manipulated. It provides an Application Programming Interface (API) for XML and HTML documents. *XML DOM views an XML document as being composed of objects. Each object has properties and behavior that can be manipulated using the methods provided by a DOM interface.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 3 of 44 The XML Document Object Model (Contd.) *Using XML DOM, programmers can create and build XML documents, navigate the structure of documents, and add, modify, or delete elements and their content. * The objects and methods provided by XML DOM can be used with any programming language, such as Java, C++, and Visual Basic. These objects can also be used with scripting languages, such as VBScript and JavaScript. * To be able to use the features of XML DOM, you need to use a DOM-enabled parser.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 4 of 44 The XML Document Object Model (Contd.) *A DOM-enabled parser reads an XML document and parses it to ensure that it is a valid document. Then, it creates an in-memory representation of the XML document by organizing its contents in a logical tree- structure. The tree-structure is made up of nodes. * MSXML is an example of a DOM-enabled XML parser.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 5 of 44 Implementation of DOM in the MSXML Parser *When the MSXML parser loads an XML document, it reads the document and creates a tree structure that represents the various components of the XML document.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 6 of 44 Implementation of DOM in the MSXML Parser (Contd.) *The following diagram depicts how DOM allows applications to access information stored in XML documents:

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 7 of 44 Tree structure of a Document *The basic building block of the tree structure is the node. *Nodes are generic containers that hold information about the elements, attributes, content, comments, and processing instructions that are stored in an XML document. *The XML document can be viewed as a single node that contains all the other nodes.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 8 of 44 Tree structure of a Document * Every component of the XML document is represented as a node in the DOM tree-structure. * Each node has a name, type, and value associated with it. The name of the node is the name of the component with which the node is associated. The type of the node depends on the type of the component it represents. * DOM treats each of these nodes as objects. Therefore, it is possible to create a script that loads an XML document, traverses through all nodes, and displays the required information to the user.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 9 of 44 XML DOM Objects and Methods * The main objects and methods provided by XML DOM that enable you to traverse, read, and manipulate the structure and content of an XML document are listed below: 3 The DOMDocument object 3 The IXMLDOMNode object 3 The IXMLDOMNodeList object 3 The IXMLDOMParseError object

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 10 of 44 The DOMDocument object * The DOMDocument object is the top-level object in XML DOM. It implements all the basic DOM methods required to work with an XML document. It also has methods, which support XSLT. * This object is associated with various methods that help you navigate, query, and modify the content and the structure of an XML document.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 11 of 44 The DOMDocument object (Contd.) * Some of the most commonly used methods of the DOMDocument object are: 3 createElement(elementname): Creates an element node. 3 createAttribute(attributename): Creates an attribute node. 3 CreateNode(type, name, namespace-URI): Creates a node of the specified type. Also supports namespace URI. 3 getElementsByTagName(elementname): Returns a collection of element nodes that have the specified element name.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 12 of 44 The DOMDocument object (Contd.) 3 load(XMLdocument): Loads the specified XML document. 3 appendChild(child node): Appends the specified child node to the document. 3 save(destination): Saves the XML document represented by the DOMDocument object at the specified destination. * Some of the commonly used properties of the DOMDocument object are: 3 async: Allows you to specify whether the XML document can be loaded asynchronously. 3 childNodes: Returns a list of child nodes. 3 firstChild: Returns the first child in the document.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 13 of 44 The DOMDocument object (Contd.) 3 readyState: Returns the information about the state of the XML document (loading, loaded, interactive, complete). 3 parseError: Returns an object of IXMLDOMParseError, which can be used to retrieve error information. 3 xml: Returns the XML representation of a node. 3 validateOnParse: Specifies whether the parser should check for validity of an XML document.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 14 of 44 Creating a DomDocument object  The following is the code segment written using JavaScript to create an instance of the DOMDocument object: var myxmldoc = new ActiveXObject("Msxml2.DOMDocument.4.0");  A reference to the newly created object is stored in the variable myxmldoc, which can be used to load and manipulate XML documents.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 15 of 44 Loading an XML file *To load an XML file by using a URL, you can write the following code in JavaScript : myxmldoc.load(" employee.xml");  The load() method can also be used to load a file from the local host by providing the path, as shown in the following example: myxmldoc.load("c:\examples\employees.xml ");

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 16 of 44 Loading an XML file (Contd.) *To load an XML document synchronously, you can write the following code in JavaScript: var myxmldoc = new ActiveXObject("Msxml2.DOMDocument.4.0"); myxmldoc.async=false; myxmldoc.load("employee.xml") ;

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 17 of 44 Using the readyState Property  To check if the document has been loaded completely, you can use the readyState property. The readyState property holds a numeric value, which represents one of the following states: 3LOADING (1): This state indicates that the loading process is in progress and data is not yet parsed. 3LOADED (2): This state indicates that data has been read and parsed but the object model is not yet ready.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 18 of 44 Using the readyState Property (Contd.) 3INTERACTIVE (3): This state indicates that the object model is available with partially retrieved data set and is in the read-only mode. 3COMPLETED (4): This state indicates that the loading process is complete.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 19 of 44 Creating a New Node  You can create a new node by using the createNode() method.  The following is the code segment to create a root element by using the createNode() method: var myxmldoc = new ActiveXObject("Msxml2.DOMDocument.4.0"); if (myxmldoc.childnodes.length==0) { myroot=myxmldoc.createNode(1,"ORDERDETAI LS"," "); myxmldoc.appendChild(myroot); myxmldoc.save(myxmldoc.XMLDocument); }

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 20 of 44 Creating New Elements  You can create new elements for the document by using the createElement() method of the myxmldoc DOMDocument object. The createElement() method takes one parameter, the name of the element that is to be created. *The following example creates a new element node called “salary”: var xmlelement; xmlelement=myxmldoc.createElement ("salary");

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 21 of 44 Accessing Elements From an XML File *To access the elements from an XML document, you can begin at the root element and navigate through the document tree. You can also query for a specific node or nodes.  To reach a particular node or nodes within the document tree structure, you can use the getElementsByTagName() method.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 22 of 44 The IXMLDOMNode object  The IXMLDOMNode object represents a node in the XML document tree structure. *The node could be an element that contains child elements.  The IXMLDOMNode object provides methods to work with child elements.  Some commonly used methods of the IXMLDOMNode object are: 3appendChild(newchild): Appends a new child to the node. 3insertBefore(newNode, refNode): Inserts a new node before the specified node. 3removeChild(nodeName): Removes the specified node.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 23 of 44 The IXMLDOMNode object (Contd.) 3replaceChild(newNode, oldNode): Replaces the oldNode with newNode. 3hasChildNodes(): Specifies whether the node has child nodes. 3cloneNode(boolean): Creates a clone of the node represented by the IXMLDOMNode object.  Some of the commonly used properties of the IXMLDOMNode object are: 3nodeName: Returns the name of the node. 3nodeType: Specifies the type of the node. 3nodeValue: Returns the text contained in the node. 3childNodes: Returns the child nodes of the node.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 24 of 44 The IXMLDOMNode object (Contd.) 3 firstChild: Returns the first child of the node. 3 lastChild: Returns the last child of the node. 3 text: Returns the text contained in the node. 3 xml: Returns the XML code for the node.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 25 of 44 Accessing Text Values of Elements * The text enclosed within the tags in an XML file is used as a node value in DOM. A node value can be the value of an attribute or the text within an element. * You can display the text within the elements or attributes by using the text property, as shown below: alert(myelement.text); * You can also set the value of an element by using this property, as shown in the example given below: myelement.text=“Barbie Doll”;

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 26 of 44 Appending a New Child Node * The following code segment creates a new element by using the createElement() method of the DOMDocument object. Then, it appends the newly created node to the last child of myelement by using the appendchild() method: var myelement=myxmldoc.documentElement; var newElement=myxmldoc.createElement ("lastchild"); myelement.appendChild(newElement);

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 27 of 44 Inserting a Node Before Two Existing Nodes * The following code segment creates a new element called department and replaces and existing node with the new element: var newElement= myxmldoc.createElement ("department"); var oldElement=myxmldoc.documentElement.chil dNodes.item(0).firstChild; myxmldoc.documentElement.childNodes.item (1).insertBefore(newElement, oldElement);

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 28 of 44 Removing a Child Node * The following code segment removes a child node by using the removeChild() method: var oldElement=myxmldoc.documentElement.chi ldNodes.item(0).firstChild; myxmldoc.documentElement.childNodes.ite m(0).RemoveChild(oldElement);

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 29 of 44 Replacing a Node (Contd.) * In the following example, the second element in the document is replaced with the new element named department : Var newElement= myxmldoc.createElement("department"); Var oldElement=myxmldoc.documentElement.chil dNodes.item(0).firstChild; myxmldoc.documentElement.childNodes.item(1 ).replaceChild(newElement, oldElement);

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 30 of 44 The IXMLDOMNodeList object * The IXMLDOMNodeList object enables you to iterate through a collection of nodes. * Some methods of the IXMLDOMNodeList object are: 3 item(number):Returns the node at the position indicated by the specified number. 3 nextNode(): Returns the next node in the list. * To obtain the length of the node list, use the length property. The length property can also be used to traverse through the list of child nodes.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 31 of 44 The IXMLDOMNodeList object (Contd.) * The following code traverses through the child nodes of myelement : var myelement=myxmlDoc.getElementsByTagName( "emp"); for(i=0;i< myelement.length –1;i++) alert(myelement.item(i).xml);

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 32 of 44 The IXMLDOMParseError Object * The IXMLDOMParseError object returns information about the most recent parse error. * The IXMLDOMParseError object provides properties to retrieve information, such as the error code, the error text, and the line that caused the error.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 33 of 44 The IXMLDOMParseError Object (Contd.) * The properties of the IXMLDOMParseError object are: 3 errorCode: Returns the error code. 3 reason: Returns a string explaining the reason for the error. 3 line: Returns the line number where the error occurred. 3 linePos: Returns the position in the line where the error occurred. 3 srcText: Returns a string containing the line that caused the error.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 34 of 44 Using the IXMLDOMParseError object * You can use the IXMLDOMParseError object to display information about the errors that are encountered while parsing an XML document. * Consider the following example: var prodxml = new ActiveXObject("Msxml2.DOMDocument.4.0"); prodxml.async = false; prodxml.load("product.xml"); if (prodxml.parseError.errorCode != 0) { alert("A parse error occurred.");} else {alert(prodxml.documentElement.xml);}

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 35 of 44 Problem Statement 7.D.1 * The product details of CyberShoppe are stored in an XML document. The structure of the XML document is defined in a DTD. The data held in the XML document must be validated against the rules specified for the data store.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 36 of 44 Task List *Identify a mechanism to access an XML document programmatically. *Identify the objects required to access the XML document. *Write the code to access the document. *Execute the code.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 37 of 44 Task 1: Identify a mechanism to access an XML document programmatically. Result: *The contents of an XML document can be accessed and manipulated from any application by using XML DOM. Therefore, to access an XML document programmatically, the best solution is to use XML DOM. Applications developed using VBScript, JavaScript, C/C++, or Visual Basic can use XML DOM objects.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 38 of 44 Task 2: Identify the objects required to access the XML document. Result: * You can validate the contents of an XML document against a DTD by using the following XML DOM objects:  DOMDocument  IXMLDOMParseError

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 39 of 44 Task 3: Write the code to access the document * To write a script that validates an XML document against the DTD, you need to follow the steps given below: 3 Create the user interface for accepting the XML file name. 3 Write the script to load the named XML document. 3 Write the script to validate the XML document against the DTD.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 40 of 44 Task 4: Execute the script

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 41 of 44 Just a Minute… * The details about products sold at CyberShoppe are stored in an XML document called product.xml. Write the code to display the price of all products by using DOM objects.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 42 of 44 Summary In this lesson, you learned that: * DOM is an application programming interface that enables an application to access the contents of an XML document. * DOM objects enable you to access and manipulate XML documents. * When the MSXML parser loads an XML document, it creates a tree structure that represents the various components of the XML document.

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 43 of 44 Summary (Contd.) * The basic building block of the tree structure is a node. A node is a container that holds information about the elements, attributes, and content stored in an XML document. * Some XML DOM objects that are used to manipulate data in a document are: 3 DOMDocument 3 IXMLDOMNode 3 IXMLDOMNodeList 3 IXMLDOMParseError

Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 44 of 44 Summary (Contd.) * The DOMDocument object is the top-level object in XML DOM. This object provides various properties and methods that help you to navigate, query, and modify the content and structure of XML documents. * The IXMLDOMNode object represents a node in the XML document structure. This object provides methods to work with child elements. * The IXMLDOMNodeList object enables you to iterate through a collection of nodes. * The IXMLDOMParseError object returns information about the most recent error.