1 / 23

DOM

DOM. Document Object Model. 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. HTML vs DOM.

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

More Related