ECA 225
Applied
Online
Programming
W3C DOM
ECA 225 Applied Interactive Programming
1
DOM Redux
 DOM
 hierarchical
 Oct
model of all objects on an HTML page
2000
 first
standard DOM, DOM1
 NN6,
 earlier
IE5
browsers used proprietary DOMs
 NN4
(layers)
 IE4 (all)
ECA 225 Applied Interactive Programming
2
DOM Redux
 newer
cont …
browsers
 Netscape
is not backwards compatible with earlier
versions of DOM
 Internet Explorer is backwards compatible with
earlier versions of DOM
ECA 225 Applied Interactive Programming
3
W3C DOM
 maps
all objects found on web page
 window
 top
of hierarchy
 document
 one
 all
level down
other objects contained in document
 relies
on object’s id
 earlier
DOMs relied on object’s name
ECA 225 Applied Interactive Programming
4
W3C DOM
cont …
 document.getElementById(
 access
‘id ’)
attributes of objects
t = document.getElementById( ‘div1’ ).style.top;
 document.getElementsByTagName(‘html_tag’)
 creates
an array of all elements on page with a given
tag name
li_array = document.getElementsByTagName( ‘li’ );
ECA 225 Applied Interactive Programming
5
nodes
 when
a document is loaded into a browser,
objects are created in memory
 W3C
DOM provides a model for how all the
objects are related
 W3C DOM refers to objects as nodes
ECA 225 Applied Interactive Programming
6
node example
<p>This is the text node within an element node.</p>
 this
example has 2 nodes:
 <p>
tag is an element node
 the words between the opening and closing <p>
tags is a text node
 parent-child
relationship
element node <p>
text node This is the text node …
ECA 225 Applied Interactive Programming
7
node example
<p>This is a child node of p. <b>And this is a child node of b.</b></p>

<p> is the parent of 2 nodes
a text node, “This is a child node of p.”
 another element node, <b>


<b> contains a child node, “And this is a child node of b.”
element node <p>
text node This is a child node of p.
element node <b>
text node And this is a child node of b.
ECA 225 Applied Interactive Programming
8
attribute node
<div align='left'>
<p>This is a child node of p, which is a child node of div. <b>And
this is a child node of b, which is a child node of p.</b></p>
</div>
element node <div>
attribute node align
element node <p>
text node This is a child node of p ...
element node <b>
ECA 225 Applied Interactive Programming
text node And this is a child node of b ...9
node properties
 each
node has properties that represent its place
in the hierarchy
 parentNode
 creates
a reference to the parent node of the object
document.getElementById(‘id’).parentNode;
ECA 225 Applied Interactive Programming
10
node properties
 firstChild
 creates
a reference to the first child of the object
document.getElementById(‘id’).firstChild;
ECA 225 Applied Interactive Programming
11
node properties
 lastChild
 creates
a reference to the last child of the object
document.getElementById(‘id’).lastChild;
ECA 225 Applied Interactive Programming
12
node properties
 childNodes
 creates
an array of all the children of the object
document.getElementById(‘id’).childNodes;
ECA 225 Applied Interactive Programming
13
node properties
 nodeValue
 if
the node is a text node, the value is returned
document.getElementById(‘id’).firstChild.nodeValue;
ECA 225 Applied Interactive Programming
14
node properties
 nodeName
 returns
the name of the node
 the
element name if it is an element node
 “#text” if it is a test node
document.getElementById(‘id’).firstChild.nodeName;
ECA 225 Applied Interactive Programming
15