Module 6: Manipulating XML Data on the Client Using DOM Contents Overview The DOM View of XML Documents Accessing DOM Trees Transforming XML with XSL Programmatically 22 Lab 6.1: Transforming XML Data on the Client 31 Working with Elements and Attributes 36 Lab 6.2: Manipulating XML Data on the Client 49 Displaying XML Data Using DOM 57 Lab 6.3: Displaying XML Data Using DOM 65 Review 72 Information in this document is subject to change without notice The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted Complying with all applicable copyright laws is the responsibility of the user No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Microsoft Corporation If, however, your only means of access is electronic, permission to print one copy is hereby granted Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property  2000 Microsoft Corporation All rights reserved Microsoft, PowerPoint, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A and/or other countries The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted Other product and company names mentioned herein may be the trademarks of their respective owners Program Manager: Steve Merrill Instructional Designers: Sangeeta Nair (NIIT), Vijayalakshmi Narayanaswamy (NIIT) Subject Matter Experts: Andy Olsen (QA Training), Andy Longshaw (Content Masters) Content Lead: Janet Robinson Graphic Artist: Scott Serna (Creative Assets) Media Management: David Mahlmann Media Production: Dean Connolly (Art Source), Timothy Demmon (:timebomb Media) Editing Manager: Jennifer Linn Editor: Dennis Rae (Wasser) Production Manager: Miracle Davis Print Coordinator: Marlene Lambert (Online Training Solutions, Inc) Build Manager: Julie Challenger Build Coordinator: Jenny Boe Test Lead: Eric Myers Manufacturing Manager: John Williams Group Product Manager: Steve Elston Module 6: Manipulating XML Data on the Client Using DOM iii Instructor Notes Presentation: 180 Minutes Lab 6.1: 30 Minutes Lab 6.2: 60 Minutes Lab 6.3: 45 Minutes This module shows how to use the Document Object Model (DOM) to access, manipulate, modify, extend, and transform an XML document This is a long module, with three labs, so you can fully expect to spend a good deal of time on this module Take it easy, making sure that students understand the purpose as well as the syntax of each topic The module uses client-side examples to illustrate the various aspects of DOM, but you should point out that DOM can be used equally well on the server Students will use DOM on the server during Module 8, “Validating XML Data Using Schemas.” Before beginning this module, you should ask students if they are already familiar with another object model (Any object model will do.) Prior exposure to an object model makes it much easier to understand issues such as inheritance, methods and properties, and creating objects in Microsoft VBScript You should also make it clear that the module describes DOM as supported by Microsoft This is an extension of the current W3C standard (DOM Level 1) The module includes features that are Microsoft extensions After completing this module, students will be able to: ! List four XML Document Object Model (DOM) objects ! Identify the nodes of a DOM tree ! Retrieve information from a DOM tree ! Add, move, and remove nodes from a DOM tree ! Identify the limitations of XSL style sheet transformations ! Use DOM to perform a transformation between XML and HTML iv Module 6: Manipulating XML Data on the Client Using DOM Materials and Preparation This section provides you with the required materials and preparation tasks that you need to teach this module Required Materials To teach this module, you need the following materials: ! Microsoft PowerPoint® file 1905a_06.ppt ! Module 6, “Manipulating XML Data on the Client Using DOM” ! Lab 6.1, “Transforming XML Data on the Client” ! Lab 6.2, “Manipulating XML Data on the Client” ! Lab 6.3, “Displaying XML Data Using DOM” Preparation Tasks To prepare for this module, you should: ! Read all of the materials for this module ! Complete the labs Due to the length of the answers to the labs for this course, we were unable to include them in the Delivery Guide Please see Appendix A or the Student CD for the lab answers ! Review Microsoft’s implementation of the DOM Go to the Web site http://msdn.microsoft.com/xml and click XML Developer’s Guide in the Table of Contents, and then click XML DOM User Guide Module 6: Manipulating XML Data on the Client Using DOM v Module Strategy Use the following strategies to present this module: ! The DOM View of XML Documents This section describes how an XML parser reads an XML document into an in-memory tree Each item in the XML document is represented by a Node in the tree Emphasize that there is a Document node at the top of the tree This is not the root element of the XML document — the root element is a child of the Document node Be careful how you describe the inheritance relationship between Node and Document/Element/Attr, and so on Some students get confused between the hierarchy of Node instances (that is, the object tree) and the inheritance hierarchy of Node classes ! Accessing DOM Trees In this section, students learn about basic navigation of a DOM tree The section shows how to attach the Document node to an XML data island, or alternatively how to load an external XML document into an XMLDOM object The section then describes how to navigate up, down, and across the DOM tree The section also describes the properties that are common to all types of nodes — nodeName, nodeType, and nodeValue ! Transforming XML with XSL Programmatically Style sheets were first introduced in Module 2, “Overview of XML Technologies,” then again in more detail in Module 4, “Displaying an XML Document Using XSL.” This section shows how to apply a style sheet to an XML document dynamically, so that the choice of style sheet can be made at run time ! Lab 6.1: Transforming XML Data on the Client This lab asks students to apply a style sheet to the “book” data island in order to transform it into a suitable format to add to the “order” data island The style sheet that performs the transformation has already been written — students can use this style sheet as is, without modification ! Working with Elements and Attributes This section extends the basic navigation capabilities introduced at the beginning of the module, to show how to add, remove, and replace elements and attributes in an XML document The selectNodes and selectSingleNode methods sometimes cause confusion, so deal carefully with these topics Another potential difficulty is the fact that an Element node does not contain the value for the element — this is held in a child Text node ! Lab 6.2: Manipulating XML Data on the Client This lab asks students to use DOM to add more details to the “order” data island There are many opportunities for students to go astray with the syntax, so keep a close eye to make sure students don’t lose time with simple syntax errors vi Module 6: Manipulating XML Data on the Client Using DOM ! Displaying XML Data Using DOM This is the final section of a long module, so you need to be sensitive to the students’ ability to absorb new information The concept of this section is simple: DOM lets you build an HTML string dynamically and display the string in a or similar element This section is quite short and straightforward Do not expect to spend as much time here as in the other sections ! Lab 6.3: Displaying XML Data Using DOM Students build an HTML table from the “order” data island Each order is represented as a different row in the table This part of the lab is relatively simple, so students should be able to cope quite easily Module 6: Manipulating XML Data on the Client Using DOM # Overview Slide Objective To provide an overview of the module topics and objectives Lead-in In this module, you will learn more about the Document Object Model (DOM) and how to dynamically load a document and manipulate DOM trees ! The DOM View of XML Documents ! Accessing DOM Trees ! Transforming XML with XSL Programmatically ! Lab 6.1: Transforming XML Data on the Client ! Working with Elements and Attributes ! Lab 6.2: Manipulating XML Data on the Client ! Displaying XML Data Using DOM ! Lab 6.3: Displaying XML Data Using DOM ! Review In Module 2, “Overview of XML Technologies,” you learned about the concept of using the Document Object Model (DOM) to access an XML document programmatically In this module, you will learn the details of DOM programming With the DOM, you can access an XML data island or load a new XML document into memory from a file Once the XML tree is in memory, you can use the DOM objects, properties, and methods to parse, navigate, and manipulate the XML document You can also perform intelligent searches on the XML data with DOM After completing this module, you will be able to: ! List four XML DOM objects ! Identify the nodes of a DOM tree ! Retrieve information from a DOM tree ! Add, move, and remove nodes from a DOM tree ! Identify the limitations of XSL style sheet transformations ! Use DOM to perform a transformation between XML and HTML Module 6: Manipulating XML Data on the Client Using DOM # The DOM View of XML Documents Slide Objective To provide an overview of the topics in this section Lead-in The XML parser creates a tree structure to hold the data in an XML document Trees are very flexible, and the DOM is essentially a set of interfaces that provide methods and properties for manipulating these trees ! Parsing XML Data ! The DOM Tree Structure ! Everything Is a Node ! W3C Standard vs Microsoft’s Implementation In this section, you will learn about XML parsers and how they parse an XML document into a tree structure in memory You will also learn about the XML Document Object Model (DOM), which allows XML data to be manipulated programmatically For more information on Microsoft’s implementation of the DOM, go to http://msdn.microsoft.com/xml, click XML Developer’s Guide in the Table of Contents, and then click XML DOM User Guide Module 6: Manipulating XML Data on the Client Using DOM Parsing XML Data Slide Objective To describe the role of the XML parser ! XML parser reads an XML document and represents the data as a tree structure in memory Lead-in The XML parser is a tool that transforms XML documents into programmable tree structures Sushi, Sushi, Anyone? Anyone? 72-80081-024 72-80081-024 New New Moon Moon Books Books 14.99 14.99 … … Charlotte Charlotte M M Cooper Cooper Yoshi Yoshi Nagase Nagase …… The XML parser is part of Microsoft® Internet Explorer The parser takes an XML document, breaks the data into tokens according to certain rules, and creates a new interpretation of the data as a tree structure in memory The parser requires a well-formed document as its input, and will reject any document that does not conform to the basic rules of XML syntax Some parsers also perform validation checks on XML documents A validating parser will check the XML document against an attached XML schema or DTD The parser in Internet Explorer is capable of performing validation checks, but does not so by default Note In addition to the parser provided in Internet Explorer 5, Microsoft also provides an XML validation tool named Xmlint.exe, which can be used to verify that an XML document is well formed Xmlint.exe can be downloaded from the following Web site: http://msdn.microsoft.com/downloads/tools/xmlint/xmlint.asp The following is an example of how you can use Xmlint.exe from the command line: xmlint –w c:\myxmldata\*.xml This command checks all the XML documents in the folder C:\myxmldata for well-formedness The “-w” flag indicates that the well-formedness check is required Module 6: Manipulating XML Data on the Client Using DOM The DOM Tree Structure Slide Objective To discuss the reasons why a tree structure is appropriate for representing XML data, and to introduce the main DOM objects Lead-in When an XML document is loaded into a parser, the parser creates a tree structure to represent the data A tree is an appropriate structure for representing XML data Document ! A tree structure reflects the hierarchy of data in an XML document ! DOM defines objects to represent nodes in the tree $ $ A Document object contains the entire XML tree Other objects represent elements, attributes, etc Document Element Element Attr Text Element Text Element Text The XML parser creates a tree to represent the data — parsing instructions, elements, attributes, and so on — in an XML document Items in the tree are called nodes The XML DOM defines a set of objects that allow the nodes in the tree to be accessed or modified Document object The top node (also known as the root node) of the tree is a Document object This node contains the entire contents of the XML document, including the processing instructions, the root element, and all its child elements The Document object has properties and methods for creating new nodes (elements and attributes) and adding them to the tree, and for manipulating the XML document as a whole Element and Attr objects Other nodes in the tree represent parts of the XML document The nodes are arranged in a hierarchy that reflects the structure of the XML document itself There are different types of DOM objects for manipulating nodes that represent different parts of a document For example, the Element object contains methods and properties pertaining to XML elements Likewise, the Attr object contains methods and properties pertaining to XML attributes (The W3C named the object Attr rather than Attribute to avoid clashing with existing Interface Definition Languages.) Methods are available for inserting or removing a child node from any node in the tree This enables the underlying tree structure to be changed programmatically ... ! Module 6, ? ?Manipulating XML Data on the Client Using DOM? ?? ! Lab 6.1, “Transforming XML Data on the Client? ?? ! Lab 6.2, ? ?Manipulating XML Data on the Client? ?? ! Lab 6.3, “Displaying XML Data Using. .. and then click XML DOM User Guide Module 6: Manipulating XML Data on the Client Using DOM Parsing XML Data Slide Objective To describe the role of the XML parser ! XML parser reads an XML document... Transforming XML Data on the Client ! Working with Elements and Attributes ! Lab 6.2: Manipulating XML Data on the Client ! Displaying XML Data Using DOM ! Lab 6.3: Displaying XML Data Using DOM ! Review