DOM Robin Burke ECT 360. Outline XHTML in Schema JavaScript DOM (MSXML) Loading/Parsing Transforming...

DOM

Robin Burke

ECT 360

Outline

XHTML in Schema JavaScript DOM (MSXML)

Loading/Parsing Transforming

• parameter passing

DOM operations• extracting data• building a document

Final Project Work/Help Session

XHTML content

Part of final project Pieces

XML file with XHTML content• best to set aside separate element

XML schema for itXSLT for displaying

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>

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

XSLT

Need to insert document nodes into outputmust use copy-of

• value-of will just take text

Must use document namespace

Example

DOM

DOMdocument object modela "programmatic" way to access XML

document datalanguage-independent

JavaScript DOM

A JavaScript implementation of DOM standarddifferent JavaScript implementation

have different levels of supportwe use MSXML

Also availableJava, C++, VB.net, etc.

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);

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));

}

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

DOM Interface Hierarchy

Node

Document Element Attr

CharacterData

SubClasses

DocumentFragment

DocumentType Entity

Others

EntityReference

NodeList

DOM Interface Hierarchy

Node

CharacterData Others

Comment Text

CDataSection

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

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)

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)

Example

names.html Display all names of jeep suppliers

Attributes

Nodes like any othergetAttributeNode(name)

Can also get value onlygetAttribute(name)works because attribute values can't

contain more nodes

Example

Names with ratings

So?

Nothing that we can't do in XSLT

Building an XML document

Only using DOM methods Basic idea

build nodes• use factory methods

assemble them• create document

output

Factory methods

createElement createTextNode createAttributeNode others

processing instructionsentity referencescdata sectionsetc.

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)

Example

Create<test foo="5"><bar>Content here</bar></test>

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

Example

Add more entries to the jeep suppliers

Final Project Work/Help