dom robin burke ect 360. outline xhtml in schema javascript dom (msxml) loading/parsing transforming...
TRANSCRIPT
![Page 1: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/1.jpg)
DOM
Robin Burke
ECT 360
![Page 2: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/2.jpg)
Outline
XHTML in Schema JavaScript DOM (MSXML)
Loading/Parsing Transforming
• parameter passing
DOM operations• extracting data• building a document
Final Project Work/Help Session
![Page 3: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/3.jpg)
XHTML content
Part of final project Pieces
XML file with XHTML content• best to set aside separate element
XML schema for itXSLT for displaying
![Page 4: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/4.jpg)
XML containing XHTML
<test xmlns="http://josquin.cs.depaul.edu/~rburke/tst" ... ><foo>Data</foo><htmlData> <table xmlns="http://www.w3.org/1999/xhtml">
<tr> <td>html here</td> </tr>
</table></htmlData>
</test>
![Page 5: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/5.jpg)
Importing XHTML namespace Various ways to do this Easiest is to use "any" element
<xs:any namespace="http://www.w3.org/1999/xhtml" processContents="skip" maxOccurs="unbounded"/>
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
![Page 6: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/6.jpg)
XSLT
Need to insert document nodes into outputmust use copy-of
• value-of will just take text
Must use document namespace
![Page 7: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/7.jpg)
Example
![Page 8: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/8.jpg)
DOM
DOMdocument object modela "programmatic" way to access XML
document datalanguage-independent
![Page 9: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/9.jpg)
JavaScript DOM
A JavaScript implementation of DOM standarddifferent JavaScript implementation
have different levels of supportwe use MSXML
Also availableJava, C++, VB.net, etc.
![Page 10: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/10.jpg)
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
Examplevar xmlDoc = new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async="false";xmlDoc.load(file);
![Page 11: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/11.jpg)
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
Examplevar 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));
}
![Page 12: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/12.jpg)
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
![Page 13: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/13.jpg)
DOM Interface Hierarchy
Node
Document Element Attr
CharacterData
SubClasses
DocumentFragment
DocumentType Entity
Others
EntityReference
NodeList
![Page 14: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/14.jpg)
DOM Interface Hierarchy
Node
CharacterData Others
Comment Text
CDataSection
![Page 15: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/15.jpg)
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
![Page 16: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/16.jpg)
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)
![Page 17: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/17.jpg)
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)
![Page 18: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/18.jpg)
Example
names.html Display all names of jeep suppliers
![Page 19: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/19.jpg)
Attributes
Nodes like any othergetAttributeNode(name)
Can also get value onlygetAttribute(name)works because attribute values can't
contain more nodes
![Page 20: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/20.jpg)
Example
Names with ratings
![Page 21: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/21.jpg)
So?
Nothing that we can't do in XSLT
![Page 22: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/22.jpg)
Building an XML document
Only using DOM methods Basic idea
build nodes• use factory methods
assemble them• create document
output
![Page 23: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/23.jpg)
Factory methods
createElement createTextNode createAttributeNode others
processing instructionsentity referencescdata sectionsetc.
![Page 24: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/24.jpg)
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)
![Page 25: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/25.jpg)
Example
Create<test foo="5"><bar>Content here</bar></test>
![Page 26: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/26.jpg)
More complexity
Sometimes useful to copy a whole node structurerather than repeat the same sequence
of create and append cloneNode(true)
creates a deep copy of a nodeinternals can be modified
![Page 27: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/27.jpg)
Example
Add more entries to the jeep suppliers
![Page 28: DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming parameter passing DOM operations extracting data](https://reader034.vdocuments.site/reader034/viewer/2022051820/56649ea25503460f94ba580c/html5/thumbnails/28.jpg)
Final Project Work/Help