DOM Robin Burke ECT 360 Outline XML DOM

DOM Robin Burke ECT 360

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

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

Java. Script XML DOM ¢ A Java. Script implementation of DOM standard different Java. Script implementation have different levels of support l we use MSXML l ¢ Also available l Java, C++, VB. net, etc.

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

Example ¢ msxml. html

Review: Transformations ¢ ¢ To apply XSLT l Load both document and XSLT files as XML documents l Call transform function on document with stylesheet as argument l Handle output Example var xml. Doc = load. XML (xml. File); var xslt. Doc = load. XML (stylesheet); var result. Doc = new Active. XObject("Microsoft. XMLDOM"); if ((xml. Doc != null) && (xslt. Doc != null)) { new. Win = window. open (); new. Win. document. write(xml. Doc. transform. Node(xslt. Doc)); }

Example ¢ msxml 2. html

More on Transformations ¢ ¢ It is possible to pass parameters to the XSLT processor But it takes a bit more work l l l ¢ 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 l and set the parameters within this object

Example ¢ pick-one. html

HTML DOM ¢ The HTML DOM l ¢ superset of XML DOM Can take advantage of known language l get. Element. By. Id() • because ids are guaranteed to be unique l 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 subinterfaces 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 Character. Data Attr Node. List Document. Type Document. Fragment Entity Others Entity. Reference Sub. Classes

Character. Data Hierarchy Character. Data Comment Text CData. Section

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

Document API ¢ get. Elements. By. Tag. Name(tagname) l ¢ document. Element l ¢ sort of like XPath "//tagname" gets the root element for traversal Factory methods l l for building new XML content create. Element (tagname) create. Text. Node(data) create. Attribute(attrname)

Traversal ¢ Node members l node. Value • text (if text node) l l first. Child child. Nodes • returns a node list ¢ Node. List l length • how many nodes l item(i) • 0 -based (array-like)

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

Attributes ¢ Nodes like any other l ¢ Can also get value only l l ¢ get. Attribute. Node(name) get. Attribute(name) works because attribute values can't contain more nodes To change l l set. Attribute (name, new. Value) works for element nodes

Example Names with ratings ¢ Dynamic content ¢

Building an XML document Only using DOM methods ¢ Basic idea ¢ l build nodes • use factory methods l assemble them • create document l output

Factory methods create. Element ¢ create. Text. Node ¢ create. Attribute. Node ¢ others ¢ processing instructions l entity references l cdata sections l etc. l

Assembly methods ¢ Methods of Element objects l ¢ append. Child(new) l ¢ ¢ adds the node to the end of the child list insert. Before (new, ref) l ¢ cannot modify child list directly adds the node to the left of the ref child also, replace. Child and remove. Child set. Attribute (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 l ¢ rather than repeat the same sequence of create and append clone. Node(true) creates a deep copy of a node l internals can be modified l

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

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

Note CSS l "-" is style name separator l font-family: Arial, sans-serif ¢ Java. Script l "-" is subtraction operator l style names use lower. Upper syntax ¢ • font-family becomes font. Family • elem. style. font. Family = "Arial, sans-serif"

Examples rollover 1. html ¢ text color rollover ¢

Manipulating element class ¢ Instead of changing style directly change an element's class l let CSS define the transformation l ¢ Benefit l ¢ style information not buried in Java. Script elem. class. Name = 'new class' l why not elem. class? !

Example rollover 2. html ¢ class-based rollover ¢

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

Example ¢ pick-one-choice. html

Homework #5 DOM programming ¢ Produce a page containing an HTML table three ways ¢ HTML line-by-line l DOM document construction l XSLT transformation l • called from Java. Script • with a parameter