1. McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Scripting with the DOM Ellen Pearlman Eileen Mullin Programming the Web Using XML

2. 10-2 Learning Objectives 1.Examine how the DOM represents one popular model for parsing XML 2.Learn how the elements and attributes in your XML documents can be represented as objects 3.Load and display XML data using JavaScript 4.Manipulate XML data with DHTML 5.Learn about browser support for the DOM

3. 10-3 Introduction Another approach to controlling the display of XML data for use in a Web browser (besides CSS and XSL) is to manipulate XML documents in the browser with the W3C's XML Document Object Model (or DOM) and a scripting language like JavaScript or VBScript. With this approach, XML carries your data in a way that makes it easily accessible to the rest of your code.

4. 10-4 Scripting with the DOM Scripting with the DOM – a technology that has been in development by the W3C since 1998 – lets you incorporate many kinds of features that can be updated on-the-fly on a Web site. By scripting with the DOM instead of with JavaScript alone, you can retrieve new XML data in a hierarchical fashion from your Web server without having to reload the page in your Web browser.

5. 10-5 An Overview of the DOM The W3C XML DOM is a standardized set of programming interfaces, or objects, that can access XML data. The DOM is meant to be used with any operating system or programming language. The DOM presents an XML document in a hierarchical diagram or a tree structure. It establishes the hierarchy that shows where elements and their attributes (or nodes) fall in the structured parent-child order of the document.

6. 10-6 Sample XML Document: A Tree of Nodes Lutece Pescatore Zen Palate

7. 10-7 A DOM Representation of an XML Document

8. 10-8 DOM-Based Parsers A type of program called an XML parser is needed to process the document's content and structure and move this information to an XML application (such as a browser). There are two basic models of XML parsers, which are called tree-based and event-based parsers. –Tree-based parsers are commonly referred to as DOM- based parsers. –Event-based parsers are frequently called SAX parsers.

9. 10-9 An XML Parser (or XML Processor) in Action

10. 10-10 Application Programming Interface (API) The DOM specification is intended to provide a standard Application Programming Interface (API) for manipulating XHTML documents and XML data through a programming language like Java or JavaScript. A program or scripting language (like JavaScript, for example) can utilize this API to manipulate this document: It can read information, add new nodes (including elements, attributes, and processing instructions), and rearrange and change existing nodes.

11. 10-11 Simple API for XML (SAX) SAX (which stands for Simple API for XML) does not have the official status of a W3C recommendation like the DOM does, but it is already supported by many software companies and developers. A SAX-based parser processes an XML document in a sequential basis. It represents a document as a string of events that a programmer writes handlers for.

12. 10-12 DOM-Based Parsing vs. SAX-Based Parsing There are benefits to both DOM-based parsing and SAX-based parsing. You can use a DOM-based parser to validate an XML document against a DTD or schema. In doing so, however, a DOM-based parser loads the full XML document into memory. By comparison, a SAX-based parser does not need to load an entire XML document into memory. A DOM-based parser tends to use more memory and processing power than a SAX-based parser.

13. 10-13 The DOM’s Design Levels The W3C has split the DOM specification into three different implementation levels. Each supports a different level of functionality. These implementation levels include: –DOM Level 1. –DOM Level 2, which is the level that the W3C now recommends that Web developers and authors conform to. –DOM Level 3. This level focuses on loading and saving documents, along with content models like DTDs and schemas.

14. 10-14 The Node Interface In a document tree, nodes are shown in relationship to one another. A node may appear as a parent, child, sibling, ancestor, or dependent – much like the relationships represented on a family tree. Understanding this concept of a tree structure is critical for understanding object-oriented programming.

15. 10-15 Classes and Inheritance

16. 10-16 Code Example: Projecting an XML Document Onto the DOM Jonathan Cott Cameron Crowe P.J. O'Rourke

17. 10-17 Associating an XML Document With the DOM

18. 10-18 Parsing the DOM You embed a JavaScript script within an XHTML document using opening and closing tags: // The rest of the script goes here. Using JavaScript, you can create an XML document object with the following code: var xmlDoc = new ActiveXObject("Microsoft.XMLDOM") This creates an instance of the Microsoft XML parser, using the variable name xmlDoc.

19. 10-19 Sample JavaScript Script for Displaying XML Data var xmlDoc = new ActiveXObject("Microsoft.XMLDOM") xmlDoc.async="false" xmlDoc.load("exchanges.xml") document.write ("The first XML element in this file consists of the following: "); document.write(xmlDoc.documentElement.firstChild.text);

20. 10-20 Constructing exchanges.xml New York Stock Exchange NYSE www.nyse.com 1-212-656-3000 1-212-656-5557

21. 10-21 Markup for the Exchange Directory Exchange Directory: Sample var xmlDoc = new ActiveXObject("Microsoft.XMLDOM") xmlDoc.async="false" xmlDoc.load("exchanges.xml") document.write ("The first XML element in this file consists of the following: "); document.write(xmlDoc.documentElement.firstChild.text);

22. 10-22 Sample XHTML Document Which Loads exchange.xml

23. 10-23 Displaying of All the Child Nodes for the Element Exchange Directory: Sample var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false" xmlDoc.load("exchanges.xml") // We move up the literal text we want displayed, in order to precede the looping statement document.write ("The values recorded for the first exchange listed in this file are as follows: "); // The looping statement appears here for (var n=0; n < xmlDoc.documentElement.childNodes.length; n++) { document.write (xmlDoc.documentElement.childNodes.item(n).text); document.write (" "); }

24. 10-24 Example: Displaying All the Child Nodes for the Element

25. 10-25 Browser Support for the DOM In spite of outward appearances, the parser in Microsoft Internet Explorer is not fully compatible with that found in the Mozilla browser. One workaround could be to create a wrapper to make the parser that doesn’t support the extensions act as though it does. Another more practical workaround is to write a conditional statement in your script to test to see what parser is in use, and then produce compatible code for each situation.

26. 10-26 The End