ECA 225

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

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

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

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

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

6. 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

7. 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

8. 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

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

10. 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

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

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

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

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

15. 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