1 / 15

ECA 225

ECA 225. Applied Online Programming. W3C DOM. 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). DOM Redux cont …. newer browsers

Télécharger la présentation

ECA 225

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related