1. Document Object Model

2. Lecture 19

3. Does the last paragraph node have any children? My Document function report() { if (document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1).hasChildNodes() ) {alert("It has child nodes"); } else { alert("It has no child nodes"); } } Has last paragraph any child nodes? My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

6. How many children does last paragraph node have? My Document function change() {alert(document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1).childNodes.length);} How many children has last paragraph? My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

9. What is nodeType of this child? My Document function report() {alert(document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1). childNodes. item(0).nodeType);} What is nodeType of this child ? My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

12. Inspecting type of child of last paragraph node (contd) We have seen that the nodeType of the child of the last paragraph node is 3, which means that it is an TEXT_NODE

13. What is nodeValue of this child? My Document function report() {alert(document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1). childNodes. item(0).nodeValue);} What is nodeType of this child ? My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

16. Change nodeValue of this child My Document function change() {document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1). childNodes. item(0).nodeValue=“A new fourth paragraph”;} Change nodeValue of this child My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

17. Note the change The text of the last paragraph has changed

18. Formal spec for Element interface Element : Node { readonly attribute DOMString tagName; DOMString getAttribute(in DOMString name); void setAttribute( in DOMString name, in DOMString value ) raises(DOMException); void removeAttribute(in DOMString name) raises(DOMException); Attr getAttributeNode(in DOMString name); Attr setAttributeNode(in Attr newAttr) raises(DOMException); Attr removeAttributeNode(in Attr oldAttr) raises(DOMException); NodeList getElementsByTagName(in DOMString name); void normalize(); };

19. Example, slide 1 My Document p.mypara { color:red } function change() {attr1 = document.createAttribute("class"); document.getElementsByTagName("p").item(1).set AttributeNode(attr1); document.getElementsByTagName("p").item(1).set Attribute("class","mypara");} function report() {alert(document.getElementsByTagName("p"). item(1).getAttributeNode("class").nodeValue);} Report "class" of second paragraph Set "class" of second paragraph My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

20. Example, slide 2 (execution in MSIE 6) Report "class" of second paragraph Set "class" of second paragraph My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

21. Example, slide 3 (execution in MSIE 6) result of hitting the “report” button Report "class" of second paragraph Set "class" of second paragraph My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

22. Example, slide 4 (execution in MSIE 6) result of hitting the “set class” button Note that appearance of 2 nd para hat not changed Report "class" of second paragraph Set "class" of second paragraph My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

23. Example, slide 5 (execution in MSIE 6) result of hitting the “report” button again Report "class" of second paragraph Set "class" of second paragraph My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

24. Example, slide 6 Browser implementation of the DOM Level 1 Core is not yet consistent As we will see when we run the same file with Mozilla 6

25. Example, slide 7 (execution in Mozilla 6) result of hitting the “report” button note that no alert box appears Report "class" of second paragraph Set "class" of second paragraph My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

26. Example, slide 8 (execution in Mozilla 6) result of hitting the “set class” button Note that the color of the 2 nd para has changed Report "class" of second paragraph Set "class" of second paragraph My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

27. Example, slide 9 (execution in Mozilla 6) result of hitting the “report” button again Now an alert box DOES appear Report "class" of second paragraph Set "class" of second paragraph My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

28. got here on 21 mar 2006