1. DOM
Robin Burke
ECT 360

2. Outline XML DOM HTML DOM DOM operations Loading/Parsing Transforming
parameter passing
HTML DOM
differences
DOM operations
general
extracting data
building a document
HTML-specific
manipulating HTML
manipulating style

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

4. JavaScript XML 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.

5. Review: Loading Loading an XML document Note Example
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);

6. Example
msxml.html

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

8. Example
msxml2.html

9. More on Transformations
It is possible to pass parameters to the XSLT processor
But it takes a bit more work
the XSLT document must be "free-threaded"
meaning multiple execution threads can operate on the object at once
not necessary for the XML being transformed
We must create a "processor" object
and set the parameters within this object

10. Example
pick-one.html

11. HTML DOM The HTML DOM Can take advantage of known language
superset of XML DOM
Can take advantage of known language
getElementById()
because ids are guaranteed to be unique
specific collections
images[]
all of the images on a page
Some nasty between-browser differences

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
Node
NodeList
Document
Element
Attr
DocumentType
Entity
CharacterData
DocumentFragment
Others
EntityReference
SubClasses

14. CharacterData Hierarchy
Comment
Text
CDataSection

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) documentElement
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 NodeList nodeValue firstChild childNodes length
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 Can also get value only To change
getAttributeNode(name)
Can also get value only
getAttribute(name)
works because attribute values can't contain more nodes
To change
setAttribute (name, newValue)
works for element nodes

20. Example
Names with ratings
Dynamic content

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

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

23. Assembly methods Methods of Element objects appendChild(new)
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)

24. Example build-xml.html Create
<test foo="5"><bar>Content here</bar></test>

25. 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

26. Example
Add more entries to the jeep suppliers
add-jeep.html

27. Manipulating style In HTML, we can manipulate style dynamically
just like other element properties
Each element has an associated style object
setting the properties of this object
change the element's displayed style
editing embedded style

28. Note CSS JavaScript "-" is style name separator
font-family: Arial, sans-serif
JavaScript
"-" is subtraction operator
style names use lowerUpper syntax
font-family becomes fontFamily
elem.style.fontFamily = "Arial, sans-serif"

29. Examples
rollover1.html
text color rollover

30. Manipulating element class
Instead of changing style directly
change an element's class
let CSS define the transformation
Benefit
style information not buried in JavaScript
elem.className = 'new class'
why not elem.class?!

31. Example
rollover2.html
class-based rollover

32. Dynamic content with XML
Using parameters,
we can load a single XML document
then query its contents
using a parameterized template

33. Example
pick-one-choice.html

34. Homework #5 DOM programming
Produce a page containing an HTML table three ways
HTML line-by-line
DOM document construction
XSLT transformation
called from JavaScript
with a parameter