DOM Robin Burke ECT 360

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

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

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.

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

Example msxml.html

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

Example msxml2.html

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

Example pick-one.html

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

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

CharacterData Hierarchy 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) 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)

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)

Example names.html Display all names of jeep suppliers

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

Example Names with ratings Dynamic content

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 instructions entity references cdata sections etc.

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)

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

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

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

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

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"

Examples rollover1.html text color rollover

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?!

Example rollover2.html class-based rollover

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

Example pick-one-choice.html

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