1. Applied Online Programming
ECA 225
Applied Online Programming
W3C DOM
ECA Applied Interactive Programming

2. ECA 225 Applied Interactive Programming
DOM Redux
DOM
hierarchical model of all objects on an HTML page
Oct 2000
first standard DOM, DOM1
NN6, IE5
earlier browsers used proprietary DOMs
NN4 (layers)
IE4 (all)
ECA Applied Interactive Programming

3. ECA 225 Applied Interactive Programming
DOM Redux cont …
newer browsers
Netscape is not backwards compatible with earlier versions of DOM
Internet Explorer is backwards compatible with earlier versions of DOM
ECA Applied Interactive Programming

4. ECA 225 Applied Interactive Programming
W3C DOM
maps all objects found on web page
window
top of hierarchy
document
one level down
all other objects contained in document
relies on object’s id
earlier DOMs relied on object’s name
ECA Applied Interactive Programming

5. ECA 225 Applied Interactive Programming
W3C DOM cont …
document.getElementById( ‘id ’)
access attributes of objects
document.getElementsByTagName(‘html_tag’)
creates an array of all elements on page with a given tag name
t = document.getElementById( ‘div1’ ).style.top;
li_array = document.getElementsByTagName( ‘li’ );
ECA Applied Interactive Programming

6. ECA 225 Applied Interactive Programming
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 Applied Interactive Programming

7. ECA 225 Applied Interactive Programming
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 Applied Interactive Programming

8. ECA 225 Applied Interactive Programming
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 Applied Interactive Programming

9. ECA 225 Applied Interactive Programming
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>
text node And this is a child node of b ...
ECA Applied Interactive Programming

10. ECA 225 Applied Interactive Programming
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 Applied Interactive Programming

11. ECA 225 Applied Interactive Programming
node properties
firstChild
creates a reference to the first child of the object
document.getElementById(‘id’).firstChild;
ECA Applied Interactive Programming

12. ECA 225 Applied Interactive Programming
node properties
lastChild
creates a reference to the last child of the object
document.getElementById(‘id’).lastChild;
ECA Applied Interactive Programming

13. ECA 225 Applied Interactive Programming
node properties
childNodes
creates an array of all the children of the object
document.getElementById(‘id’).childNodes;
ECA Applied Interactive Programming

14. ECA 225 Applied Interactive Programming
node properties
nodeValue
if the node is a text node, the value is returned
document.getElementById(‘id’).firstChild.nodeValue;
ECA Applied Interactive Programming

15. ECA 225 Applied Interactive Programming
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 Applied Interactive Programming