Eca 225
This presentation is the property of its rightful owner.
Sponsored Links
1 / 15

ECA 225 PowerPoint PPT Presentation


  • 142 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Eca 225

ECA 225

AppliedOnline Programming

W3C DOM

ECA 225 Applied Interactive Programming


Dom redux

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


Dom redux cont

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


W3c dom

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


W3c dom cont

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


Nodes

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


Node example

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


Node example1

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


Attribute node

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


Node properties

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


Node properties1

node properties

  • firstChild

    • creates a reference to the first child of the object

document.getElementById(‘id’).firstChild;

ECA 225 Applied Interactive Programming


Node properties2

node properties

  • lastChild

    • creates a reference to the last child of the object

document.getElementById(‘id’).lastChild;

ECA 225 Applied Interactive Programming


Node properties3

node properties

  • childNodes

    • creates an array of all the children of the object

document.getElementById(‘id’).childNodes;

ECA 225 Applied Interactive Programming


Node properties4

node properties

  • nodeValue

    • if the node is a text node, the value is returned

document.getElementById(‘id’).firstChild.nodeValue;

ECA 225 Applied Interactive Programming


Node properties5

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


  • Login