The Document Object Model

1
The Document Object Model

• XML DOM

2
The JavaScript Object Hierarchy
3
Referring to (DOM) objects
window.resizeTo(300,300)
document.write("ltH4gt" navigator.userAgent
"lt/H4gt")
parent.frame1.location.replace(someFile.html")
d new Date() document.write(d.toGMTString())
4
JavaScript Document Object Model

• Document methods
• write(string)
• document.write(ltH1gtHomelt/H1gt)
• inserts content in lthtmlgt element
• Document attributes
• alinkColor, linkColor, vlinkColor
• bgColor, fgColor

5
JavaScript Document Object Model

• Objects relating to (sets of) elements in the
  Document content
• images
• forms
• links
• anchors
• applets

6
What is the XML DOM?

• API for manipulating XML
• applies to all well-formed XML structures
• Defined and maintained by W3C
• DOM Level 2 November 13th 2000
• DOM Level 3 Working Draft January 14th 2002
• developers use specific language bindings of DOM
  standard
• e.g. JavaScript binding of XML DOM, Java DOM
  classes (JAXP, JDOM)

7
The DOM API Core

• defines interfaces to all document content types
• attributes and methods
• generic Node interface
• provides general methods and attributes for any
  XML Node type
• specific node type interfaces
• inherit from Node interface but provide specific
  functionality

8
UML model of XML DOM core classes and interfaces
9

• ATTRIBUTE_NODE
• CDATA_SECTION_NODE
• COMMENT_NODE
• DOCUMENT_FRAGMENT_NODE
• DOCUMENT_NODE
• DOCUMENT_TYPE_NODE
• ELEMENT_NODE
• TEXT_NODE
• ENTITY_NODE
• ENTITY_REFERENCE_NODE
• NOTATION_NODE
• PROCESSING_INSTRUCTION_NODE

XML DOM Node Types
10
the Node interface
Attributes (most of these are read-only) nodeName
DOMString nodeValue DOMString type unsigned
short parentNode Node, childNodes
NodeList firstChild Node, lastChild
Node previousSibling Node, nextSibling
Node attributes NamedNodeMap ownerDocument
Document namespaceURI, Prefix, localName DOMString
11
the Node interface
Methods Boolean hasAttributes ( ) Boolean
hasChildNodes ( ) Node InsertBefore (Node
newChild, Node refChild) Node replaceChild (Node
newChild, Node oldChild) Node removeChild (Node
oldChildfff) Node appendChild (Node
newChild) Node cloneNode (Boolean Deep) Boolean
isSupported (DOMString Feature,DOMString version
) Void normalize ( )
12
the NodeList interface
Attributes Long integer length Methods Node
item (integer index) Example of use for (i 0
i lt theList.length i) doSomethingWith
(theList.item (i))
13
the Node interface
Methods Boolean hasAttributes ( ) Boolean
hasChildNodes ( ) Node InsertBefore (Node
newChild, Node refChild) Node replaceChild (Node
newChild, Node oldChild) Node removeChild (Node
oldChild) Node appendChild (Node newChild) Node
cloneNode (Boolean Deep) Boolean isSupported
(DOMString Feature,DOMString version ) Void
normalize ( )
14
specific node type interfaces

• structural nodes
• DocumentType, ProcessingInstruction, Notation,
  Entity
• provide mostly read only information about
  structural or document-handling instructions
• content nodes
• Document, Element, Attr, Text etc.
• provide manipulable interface to the data content
  of the XML

15
The Document Structure
16
the Document interface
Attributes (all of these are read-only) docType
DocumentType implementation DOMImplementation docu
mentElement Element Example of Use root
theDocument.documentElement //the root now
contains the entire body of the parsed document
17
the Document interface
Methods Attr createAttribute (DOMString
name) Element createElement (DOMString
tagName) Text createTextNode (DOMString
textData) can also create comments, CDATA,
etc... Element getElementById(DOMString
id) NodeList getElementsByTagName(DOMString
tagName) Example of use theContents
doc.getElementsByTagName (item) // gets all
item elements in the document
18
the Element interface
Attributes (read-only) tagName
DOMString Methods DOMString getAttribute
(DOMString name) Attr getAttributeNode (DOMString
name) NodeList getElementsByTagName(DOMString
tagName) Boolean hasAttribute (DOMString
name) Void removeAttribute (DOMString name) Attr
removeAttributeNode (DOMString name) Void
setAttribute (DOMString name) Attr
setAttributeNode (Attr newAttribute)
19
the Element interface
Methods Attr createAttribute (DOMString
name) Element createElement (DOMString
tagName) Text createTextNode (DOMString
textData) can also create comments, CDATA,
etc... Element getElementById(DOMString
id) NodeList getElementsByTagName(DOMString
tagName) Example of use theContents
doc.getElementsByTagName (item) // gets all
item elements in the document
20
the Attr interface
Attributes (all read-only except value) name
DOMString ownerElement Element specified
Boolean value DOMString Example of
use theColour gandalf.getAttributeNode
("colour") theColour.value "Grey" balrog
(gandalf) theColour.value "White"
21
The JavaScript binding of DOM
22
client-side DOM manipulation

• loading XML data
• MSXML ActiveXObject in IE6
• get XML data file from a URL
• use JavaScript binding to manipulate and present
  data
• implements XML DOM interface
• also HMTL-specific features
• innerHTML property
• post data to server for serialisation

23
XML DOM in JavaScript
ltFORMgt ltTABLE border "2" style
"font-sizelarge"gt ltTRgt ltTDgtHugo
Firstlt/TDgt ltTDgtltINPUT TYPE "CHECKBOX" NAME
"present" gtlt/TDgt lt/TRgt ltTRgt ltTDgtSue
Pladlelt/TDgt ltTDgtltINPUT TYPE "CHECKBOX" NAME
"present" gtlt/TDgtlt/TRgt ... lt/TABLEgt ltINPUT TYPE
"BUTTON" VALUE "ABSENT ONCLICK "hide
(true)"gt ltINPUT TYPE "BUTTON" VALUE
"PRESENT ONCLICK "hide (false)"gt ltINPUT
TYPE "BUTTON" VALUE "ALL ONCLICK
"showall ()"gt lt/FORMgt
24
XML DOM in JavaScript
function hide (flag) var rows
document.getElementsByTagName("tr") var boxes
document.getElementsByName("present") var count
0 for (var i 0 i lt rows.length i)
if (boxesi.checked flag) rows
i.style.display "none" else
count rowsi.style.display
"block" var mesg document.getElementById
("mesg") mesg.innerHTML ("Showing " count
" out of " rows.length "students")
25
XML DOM in JavaScript
function showall () var rows
document.getElementsByTagName("tr") for (var i
0 i lt rows.length i) rowsi.style.display
"block" mesg.innerHTML ("Showing "
rows.length " out of "
rows.length) ltSCRIPT LANGUAGE"JavaScript"gt v
ar rows document.getElementsByTagName("tr") do
cument.write("ltP ID\"mesg\"gt") document.write("
Showing " rows.length " out of "
rows.length) document.write("lt/Pgt") lt/SCRIPTgt
26
The Java DOM binding

• JAXP classes

27
load, modify, serialise
original data
Java Program
XML source
modified data
28
Java and XML

• javax.xml.parser package
• JAXP - Java API for XML Processing
• provides parser classes for DOM and SAX parsing
  of XML
• org.w3c.dom package contains essentially the Java
  binding of the XML DOM
• org.xml.sax package contains SAX API
• javax.xml.transform
• XSLT API (part of JAXP 1.1)

29
The Java binding of DOM
Document Builder Factory
DOM
XML data
Document Builder
30
The Java binding of DOM

• generic and specific Node types implemented as
  Java classes
• org.w3c.dom.Document
• org.w3c.dom.Element
• org.w3c.dom.Attr etc.
• methods and attributes correspond to the DOM
  specification
• typing is more of an issue than in JavaScript

31
simple example
lt?xml version "1.0"?gt lt!-- myIntro.xml
--gt lt!-- a simple introduction to Java DOM
processing --gt lt!DOCTYPE myMessage
lt!ELEMENT myMessage ( message )gt lt!ELEMENT
message ( PCDATA )gt gt ltmyMessagegt
ltmessagegtThis text will be replacedlt/messagegt lt/my
Messagegt
32
simple example
// ReplaceText class // Reads an XML file and
replaces a text node. // first import the
necessary classes import java.io. import
org.w3c.dom. import javax.xml.parsers. import
org.apache.crimson.tree.XmlDocument import
org.xml.sax.
33
simple example
public class ReplaceText private Document
document public ReplaceText() try
// obtain the default parser
DocumentBuilderFactory factory
DocumentBuilderFactory.newInstance() //
set the parser to validating
factory.setValidating( true )
DocumentBuilder builder factory.newDocumentBuild
er() // builder can now be used to construct a
DOM tree
34
simple example
// obtain document object from XML
document document builder.parse( new File(
"myIntro.xml" ) ) // now we can do the standard
DOM stuff // first, we get the root node Node
root document.getDocumentElement() if (
root.getNodeType() Node.ELEMENT_NODE )
Element myMessageNode ( Element ) root // make
a NodeList of all the message elements
NodeList messageNodes myMessageNode.getElem
entsByTagName( "message" ) // get the first
message element in the list if (
messageNodes.getLength() ! 0 ) Node
message messageNodes.item( 0 )
35
simple example
// create a text node Text newText
document.createTextNode(Text has been
replaced!") // get the old text node, note the
explicit typecast Text oldText ( Text )
message.getChildNodes().item( 0 ) // replace
the text message.replaceChild( newText, oldText
) / the text content of the message
element has been replaced /
36
simple example
// now write out to an XML file and specify the
error-handling behaviour ( (XmlDocument)
document).write( new FileOutputStream(newIntro.x
ml" ) ) catch ( SAXParseException spe )
System.err.println( "Parse error "
spe.getMessage() ) System.exit( 1 )
catch ( SAXException se )
se.printStackTrace() catch (
FileNotFoundException fne ) System.err.println(
"File \'myIntro.xml\' not found. " )
System.exit( 1 ) catch ( Exception e )
e.printStackTrace()