1. XML DOM Week 11 Web site: http://fog.ccsf.edu/~hyip

2. XML DOM (Document Object Model) The XML DOM defines a standard way for accessing and manipulating XML documents. The DOM presents an XML document as a tree-structure.

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

4. Document Object Model (DOM) What is the HTML DOM?  The HTML DOM defines the objects and properties of all HTML 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 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. In the DOM, everything in an XML document is a node.

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

6. 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: 2005, the element node, holds a text node with the value "2005". "2005" is not the value of the element!

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

8. Node Parent, 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). Properties of Nodes:  In a node tree, the top node is called the root  Every node, except the root, has exactly one parent node  A node can have any number of children  A leaf is a node with no children  Siblings are nodes with the same parent

9. XML file T1 A1 2005 30.00 T2 A2 2002 32.00 T3 A3 2007 40.00

10. Nodes Relationship The following image illustrates a part of the node tree and the relationship between the nodes:

11. Node Relationship (continue…) 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. NOTE: 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).

12. XML Parser 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. An XML parser reads XML, and converts it into an XML DOM object that can be accessed with JavaScript. Most browsers have a built-in XML parser. NOTE: from our AJAX example, responseXML is an XML DOM object.

13. Programming Interface The DOM models XML as a set of node objects. The nodes can be accessed with JavaScript or other programming languages. 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 "book"). Methods are often referred to as something that is done (i.e. delete "book").

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

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

16. Sample JavaScript Coding var xmlDoc, x; xmlDoc = xmlHttp.responseXML; x = xmlDoc.getElementsByTagName("title"); var y = x[0].childNodes[0].nodeValue; var z = x[1].childNodes[0].nodeValue; // or var y = xmlDoc.getElementsByTagName ("title")[0].childNodes[0].nodeValue; var z = xmlDoc.getElementsByTagName ("title")[1].childNodes[0].nodeValue;

17. Sample JavaScript Coding (continue…) Explained: xmlDoc - the XML DOM object created by the parser. getElementsByTagName("title")[0] - the first element childNodes[0] - the first child of the element (the text node) nodeValue - the value of the node (the text itself)

18. Ajax – Asynchronous JavaScript and XML http://fog.ccsf.edu/~hyip/cnit133/10/samples/n ote.html http://fog.ccsf.edu/~hyip/cnit133/10/samples/aj ax_sample_js.txt http://fog.ccsf.edu/~hyip/cnit133/10/samples/n ote_php.txt

19. Homework 10 http://fog.ccsf.edu/~hyip/cnit131a/11/homew ork/10_homework.html http://fog.ccsf.edu/~hyip/cnit131a/11/homew ork/10_homework.html http://fog.ccsf.edu/~hyip/cnit131a/11/homew ork/10_homework.xml http://fog.ccsf.edu/~hyip/cnit131a/11/homew ork/10_homework.xml