1. DOM Robin Burke ECT 360

2. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data building a document Final Project Work/Help Session

3. XHTML content Part of final project Pieces XML file with XHTML content best to set aside separate element XML schema for it XSLT for displaying

4. XML containing XHTML Data html here

5. Importing XHTML namespace Various ways to do this Easiest is to use "any" element What this does states that this element can be anything from XHTML namespace that the schema will not attempt to validate it needed because there is no XHTML schema

6. XSLT Need to insert document nodes into output must use copy-of value-of will just take text Must use document namespace

7. Example

8. DOM document object model a "programmatic" way to access XML document data language-independent

9. JavaScript DOM A JavaScript implementation of DOM standard different JavaScript implementation have different levels of support we use MSXML Also available Java, C++, VB.net, etc.

10. Review: Loading Loading an XML document Create XML parser object Set parameters Call load() function Note loading is not part of DOM standard differs with implementation Example var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.load(file);

11. Review: Transformations To apply XSLT Load both document and XSLT files as XML documents Call transform function on document with stylesheet as argument Handle output Example var xmlDoc = loadXML (xmlFile); var xsltDoc = loadXML (stylesheet); var resultDoc = new ActiveXObject("Microsoft.XMLDOM"); if ((xmlDoc != null) && (xsltDoc != null)) { newWin = window.open (); newWin.document.write(xmlDoc.transformNode(xsltDoc)); }

12. DOM interfaces DOM parsers create a DOM tree Each node on the tree is populated by an instance of some class that implements one of the various DOM classes All interfaces in a DOM tree are sub- interfaces of the DOM Node interface An interface is similar to a class but has no bodies to the methods Interfaces need to have concrete class implementations

13. DOM Interface Hierarchy NodeDocumentElementAttrCharacterData SubClasses DocumentFragmentDocumentTypeEntity Others EntityReferenceNodeList

14. DOM Interface Hierarchy NodeCharacterData Others CommentTextCDataSection

15. Document Node Contains root node / root element Document is subtyped from type Node Can use it the same as any other node Contains the DTD Contains other special document info Contains XML declaration Not exposed to the programmer Can’t determine encoding type Contains processing instructions Home of many functions

16. Document API getElementsByTagName(tagname) sort of like XPath "//tagname" documentElement gets the root element for traversal Factory methods for building new XML content createElement (tagname) createTextNode(data) createAttribute(attrname)

17. Traversal Node members nodeValue text (if text node) firstChild childNodes returns a node list NodeList length how many nodes item(i) 0-based (array-like)

18. Example names.html Display all names of jeep suppliers

19. Attributes Nodes like any other getAttributeNode(name) Can also get value only getAttribute(name) works because attribute values can't contain more nodes

20. Example Names with ratings

21. So? Nothing that we can't do in XSLT

22. Building an XML document Only using DOM methods Basic idea build nodes use factory methods assemble them create document output

23. Factory methods createElement createTextNode createAttributeNode others processing instructions entity references cdata sections etc.

24. Assembly methods Methods of Element objects cannot modify child list directly appendChild(new) adds the node to the end of the child list insertBefore (new, ref) adds the node to the left of the ref child also, replaceChild and removeChild setAttribute (name, value)

25. Example Create Content here

26. More complexity Sometimes useful to copy a whole node structure rather than repeat the same sequence of create and append cloneNode(true) creates a deep copy of a node internals can be modified

27. Example Add more entries to the jeep suppliers

28. Final Project Work/Help