DOM

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