1. INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 sunny.shi@senecacollege.ca SENECA COLLEGE

2. 2 Outline DOM Programming Next class: – Test #2

3. DOM Programming Interface All HTML elements are objects DOM programming interface: properties and methods of each object. Property: a value that you can get or set (like changing the content of an HTML element) A method is an action you can do (like add or deleting an HTML element) 3

4. DOM Programming Interface What can DOM do? – Access an element – Change HTML content – Change Attribute value – Change CSS style – Add or Remove an element

5. Access an Element 1. Most common way: use id of the element. var x = document.getElementById(“hi”); var txt = document.getElementById("hi").innerHTML; 2. Access elements by tag name: var x = document.getElementsByTagName(“p”); var y = element.getElementsByTagName(“p”); 5 Dom1.html Dom_TagName.html

6. Access an Element 3. By Class Name var x = document.getElementsByClassName(“red”); document.write(x[0].innerHTML); 6 Dom2.html

7. Access an Element 4. By Object Collections, e.g., forms var x = document.getElementById("frm1"); var txt = ""; for (var i=0;i<x.length;i++) { txt = txt + x.elements[i].value + " "; } 7 Dom3.html

8. Change HTML Content 1. innerHTML property Useful to get or replace the content of HTML elements. 1) get: var txt1 = document.getElementById(“userName").innerHTML 2) set/ replace document.getElementById("hi").innerHTML = txt; 8 Dom1.html

9. Change Attribute Value 2. attribute property document.getElementById(id).attribute=new value document.getElementById("image").height = "200"; document.getElementById("image").src="pic2.jpg"; 9 DOM_Attribute.html

10. Change CSS Style 3. style.property document.getElementById(id).style.property=new style document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize=“20px"; document.getElementById("p2").style.width = "30%"; document.getElementById("p2").style.border = "1px red solid"; 10 DOM_style.html

11. Add An Element Hello, world! This is my home page. Have Fun function addTextNode() { var desired_element = document.getElementById("main"); var new_element = document.createElement("p"); var new_text_content = document.createTextNode("Have fun!"); new_element.appendChild(new_text_content); desired_element.appendChild(new_element); } 11 addElement.html

12. Remove An Element function removeNode() { var desired_element = document.getElementById("main"); var remove_element = desired_element.removeChild(desired_element.childNodes[0]); alert(remove_element.innerHTML); } function removeDiv() { var divElem = document.getElementById("main"); divElem.parentNode.removeChild(divElem); } =============================================================== Welcome para 1 para 2 para 3 Remove para 1 Remove Div 12 removeElement.html

13. DOM Events When a user clicks the mouse (onclick/ondbclick) DOM_event_onclick.html When a web page has loaded (onload/ onunload) DOM_event_onload.html When the mouse moves over an element (onmouseover/ onmouseout/ onmousedown/onmouseup) DOM_event_onmouseover.html DOM_event_onmousedown.html 13

14. DOM Events When an input field is changed (onchange) DOM_event_onchange.html When a field gets focus (onfocus) DOM_event_onfocus.html 14

15. DOM Events When a user strokes a key (onkeydown/onkeypress/onkeyup) DOM_event_onkey.html When an HTML form is submitted (onsubmit/onreset) 15

16. Lab 6 16

17. Next Class Test 2 17

18. Thank you!