slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
DOM PowerPoint Presentation
Download Presentation
DOM

Loading in 2 Seconds...

play fullscreen
1 / 23
graiden-burt

DOM - PowerPoint PPT Presentation

160 Views
Download Presentation
DOM
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

  1. DOM Document Object Model

  2. What is the DOM ? • A browser is a software program • As such, it has objects in memory, representing the various elements of the HTML page • These objects are organized in a tree data structure  the Document Object Model

  3. HTML vs DOM • HTML code translates into a tree • Each HTML element is a Node in the tree • Nodes can be different: they can represent HTML elements, attributes of HTML elements, text values • Important Nodes: Element Nodes, Text Nodes, and Attribute Nodes

  4. DOM • We can navigate the DOM to impact the HTML page • We can traverse the tree, access a Node, modify the Node, delete the Node, insert a new Node

  5. DOM - getElementById • One way to access a Node is to use the getElementById method; the API is: • Element getElementById( DOMString id ) • We call it with the document object • var element = document.getElementById( “CT376” ); • The above code retrieves (if there is one) the “first” element in the tree that has the id CT376

  6. DOM - innerHTML • An Element Node, as a Javascript object, has a property named innerHTML, that represents the contents of the HTML element • If we have a H1 element with id CT376 • var h1Element = document.getElementById( “CT376” ); • h1Element.innerHTML = “CHANGED!!”; • We just changed the H1 element

  7. DOM - innerHTML • We can display a running clock • Have a div element with an id • Retrieve it via its id • Use setInterval to run a function every second • Inside that function, set the contents of the div element to the current date and time (which we can get via the Date class)

  8. DOM - getElementsByTagName • We can access all the element with the same tag using the getElementsByTagName method (note the s after Element); the API is: • NodeList getElementsByTagName( DOMString tagName ) • It takes one parameter, a String (representing the type of HTML element we want to retrieve) • We call it with the document object • var pars = document.getElementsByTagName( “p” ); • The above code retrieves all the paragraphs

  9. DOM - getElementsByTagName • var pars = document.getElementsByTagName( “p” ); • We can loop through a NodeList like we loop through an array  Loop through pars to access them/change them • for( var i = 0; i < pars.length; i++ ) • pars[i].innerHTML = “Changed “ + i;

  10. DOM - getElementsByClassName • We can access all the element with the same class using the getElementsByClassName method (note the s after Element) • It takes one parameter, a String (representing the class name of the elements we want to retrieve) • We call it with the document object • var elements = document.getElementsByClassName( “important” ); • The above code retrieves all the elements that specify important as their class

  11. DOM - getElementsByClassName • var importantElements = document.getElementsByClassName( “important” ); • Loop through pars to access them/change them • for( var i = 0; i < importantElements .length; i++ ) • importantElements[i].innerHTML = “Changed “ + i;

  12. DOM – Node properties • In addition to innerHTML, we also have the following properties: • nodeName (read-only), nodeValue, nodeType (read-only) • parentNode, firstChild, lastChild, childNodes • previousSibling, nextSibling • attributes

  13. DOM – nodeName property • It is a read-only property (cannot change it) • For an element Node  tag name • For an attribute Node  attribute name • For a text Node  #text (always) • For the document Node  #document

  14. DOM – nodeValue property • Read/write property (we can change it) • For an element Node  undefined • For an attribute Node  attribute value • For a textNode  the text itself

  15. DOM – nodeType property • Read-only property (we cannot change it) • For an element Node  1 • For an attribute Node  2 • For a text Node  3 • For a comment Node  8 • For the document Node  9

  16. DOM – hierarchy • parentNode: the parent Node of this Node • firstChild: the left-most child of this Node • lastChild: the right-most child of this Node • childNodes: the children of this Node • previousSibling: the left sibling of this Node • nextSibling: the right sibling of this Node • attributes: the attributes of this Node

  17. DOM – hierarchy • The data type of the property childNodes is NodeList • The data type of the property attributes is NamedNodeMap • We can loop through them as if they were arrays

  18. DOM – Hierarchy • We can reconstruct the tree by retrieving nodes and checking their parent, siblings, children

  19. DOM – Traversing the Tree • Recursive function to traverse the tree • To traverse a tree rooted at Node nd • If nd is null, do nothing • If nd is not null • Output value of nd, .. • Loop through all children of nd • Traverse each child of nd

  20. DOM – Traversing the Tree • function traverse( nd ) • { • if( nd != null ) • { • alert( nd + “, value: “ + nd.nodeValue ); • var temp = nd.firstChild; • while( temp != null ) • { • traverse( temp ); • temp = temp.nextSibling; • } • } • }

  21. DOM – Interface Hierarchy • Node is at the top of the Interface Hierarchy • Node • Document • DocumentFragment • Element • CharacterData • Attr • Entity • ….

  22. DOM – Interface Hierarchy • Node is at the top of the Interface Hierarchy • Node • Document • DocumentFragment • Element • CharacterData • Attr • Entity • ….

  23. DOM – Interface Hierarchy • Element • HTMLElement • HTMLHtmlElement • HTMLHeadElement • HTMLTitleElement • HTMLBodyElement • HTMLHeadingElement • HTMLParagraphElement • HTMLTableElement • ….