Scripting with the DOM

1. Scripting with the DOM Ellen Pearlman Eileen Mullin Programming the Web Using XML

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

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. 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. 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. Sample XML Document: A Tree of Nodes <?xml version="1.0" encoding="UTF-8"?> <restaurants> <restaurant cuisine="French">Lutece</restaurant> <restaurant cuisine="Seafood">Pescatore</restaurant> <restaurant cuisine ="Vegetarian">Zen Palate</restaurant> </restaurants>

7. A DOM Representation of an XML Document

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. An XML Parser (or XML Processor) in Action

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. 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. 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. 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. 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. Classes and Inheritance

16. Code Example: Projecting an XML Document Onto the DOM <?xml version="1.0"?> <!--in this listing, periodicals appear first, then books --> <library xmlns="http://www.library.org/schemas/library"> <periodical name="Rolling Stone"> <writer>Jonathan Cott</writer> <writer>Cameron Crowe</writer> <writer>P.J. O'Rourke</writer> </periodical> <!-- insert next periodical here --> </library>

17. Associating an XML Document With the DOM

18. Parsing the DOM • You embed a JavaScript script within an XHTML document using opening and closing <script> tags: <script type="text/javascript"> // The rest of the script goes here. </script> • 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. Sample JavaScript Script for Displaying XML Data <script type="text/javascript"> 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); </script>

20. Constructing exchanges.xml <?xml version="1.0" ?> <exchange> <name>New York Stock Exchange</name> <code>NYSE</code> <url>www.nyse.com</url> <phone>1-212-656-3000</phone> <fax>1-212-656-5557</fax> </exchange>

21. Markup for the Exchange Directory <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Exchange Directory: Sample</title> </head> <body> <script type="text/javascript"> 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); </script> </body> </html>

22. Sample XHTML Document Which Loads exchange.xml

23. Displaying of All the Child Nodes for the <exchange> Element <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exchange Directory: Sample</title> </head> <body> <script type="text/javascript"> 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: <br /><br />"); // 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 ("<br />"); } </script> </body> </html>

24. Example: Displaying All the Child Nodes for the <exchange> Element

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