1. Manipulating the DOM CST 200 – JavaScript 3 – 4 - 13

2. Objectives Learn how to work with the Document Object Model (DOM) Learn about the various arrays stored within the Document object Work with the document.images[] Array Use the document.getElementById() function Work with the innerHTML property 2

3. Document Object Model The Document Object Model (DOM) is a hierarchy of objects that represent the web browser, the web page document and web page elements The DOM provides programmatic access to different aspects of the Web browser window and Web page 3

4. 4 Document Object Model

5. Document Object Model (cont) Objects in the Document Object Model (DOM) are created automatically by the web browser when the web browser opens a page The top-level object is the Window object, which represents the browser window 5

6. Window Object The Window object represents a Web browser window The Window object is called the global object because all other DOM objects are contained inside of it We've used the Window object to display pop-up boxes to the user window.alert(msg); 6

7. The Document Object The Document object represents the Web page displayed in a browser The Document objects contains all the Web page elements – Each web page element is further represented as its own object We've used the Document object to write information to the web page document.write(msg); 7

8. Document Object Arrays The Document object contains arrays to store and organize specific html elements Each array stores a specific category of html elements These arrays include: – anchors[ ] – applets[ ] – forms[ ] – elements[ ] – images[ ] – links[ ] 8 the images[ ] array stores Image objects corresponding to each element

9. Accessing DOM Objects Consider the page below, containing one element and three elements: Letters 9

10. Accessing DOM Objects (cont) When the web browser loads the page, each a new Image object will be created to represent each element The document.images[] array will store all of the Image objects document.images[0] document.images[1] document.images[2] 10

11. Accessing DOM Objects (cont) The first element of the document.images[] array is an Image object document.images[0] This Image object has properties and methods that can be accessed 11

12. Accessing Object Properties Once identifying a specific object, we can then access specific properties document.images[0] is the first Image object We can access properties of the image, such as document.images[0].src document.images[0].width document.images[0].height 12 src = "A.jpg" width = 240 height = 240

13. Web Console Exercise #1 Open the following page in Firefox: http://www.capitalcc.edu/faculty/sfreeman/cst200/dom/letters.html Enter the following expressions into Web Console. What does each statement return? document.images[0] document.images[0].src document.images[0].width document.images[0].border document.images[1] document.images[1].height 13

14. Accessing DOM Objects (cont) Another way of accessing DOM objects is by assigning the name attribute to html elements Below we set the name attribute to the images: 14

15. Accessing DOM Objects (cont) Elements can then be referenced by adding the name following a period(.), following the document object document.imgA document.imgB document.imgC 15

16. Accessing DOM Objects (cont) Using the DOM, we can access the same Image object, in two different ways: Through the element's name: document.imgA or through the images[ ] array document.images[0] 16

17. Modifying Object Properties We can also modify the object properties by assigning a new value to a property // set a new file as the image src document.images[0].src = "newA.jpg"; // set a new image width document.images[0].width = 500; // set a new border width document.imgA.border = 5; // hide image by changing the css display // property document.imgA.style.display="none" 17

18. Web Console Exercise #2 Return to the letters.html web page in Web Console Enter the following statements into Web Console. What does each statement do? document.imgA.src = "B.jpg" document.imgA.width = 50 document.imgA.width = 350 document.imgA.border = 15 document.imgA.src = "A.jpg" document.imgB.style.display = "none" 18

19. Accessing DOM Object - Exercise Assume the following page: Welcome Guests Guests can check in anytime after 8pm Write down how to access the creek Image object through the images[ ] array and through the element name. 19

20. Accessing JavaScript Objects (cont) So far, we have accessed objects through the Document object and images[] array When referring to the current object, another way of accessing an object is through the this keyword – The this keyword refers to the current object Example: 20

21. Accessing JavaScript Objects (cont) Using the this keyword, we can easily manipulate the current object 21 <img src="A.jpg" alt="A" onmousedown="this.src='B.jpg'" onmouseup="this.src='A.jpg'" /> <img src="B.jpg" alt="B" onmouseover="this.border=20" onmouseout="this.border=0" />

22. getElementById() function We've seen two ways of accessing a DOM object through the document array and with the name attribute value Another way of accessing a specific DOM object is with the document.getElementById() function JavaScript, Fifth Edition22

23. getElementById() function (cont) The document.getElementById( ) function returns a DOM object based on the id attribute – In order to use this function, the html element must have been assigned an id attribute JavaScript, Fifth Edition23

24. getElementById() example Example: imagine in our html document we defined the following element: We can then use the JavaScript expression: document.getElementById("john") to access the DOM object representing the element JavaScript, Fifth Edition24

25. getElementById() example #2 Intro Welcome to the … JavaScript, Fifth Edition25 document.getElementById("top") document.getElementById("main") document.getElementById("welcome") document.getElementById("footer")

26. Web Console Exercise #3 Return to the letters.html web page in Web Console Enter the following statements into Web Console. What does each statement do? document.getElementById("letters") document.getElementById("summary") document.getElementById("img5") document.getElementById("img5").width 26

27. innerHTML property Each html element has an innerHTML property that can be used to change the content of the html element Setting the innerHTML property to a value, will update the content of the html element We will use innerHTML in conjunction with document.getElementById() JavaScript, Fifth Edition27

28. innerHTML property (cont) Example: imagine in our html document we defined the following element: Welcome to Bill’s Auto We can then use the JavaScript expression: document.getElementById("welcome").innerHTML to access the content of the paragraph element JavaScript, Fifth Edition28

29. Web Console Exercise #3 Return to the letters.html web page in Web Console Enter the following statements into Web Console. What does each statement do? document.getElementById("summary").innerHTML= “Welcome to Letters Page” document.getElementById("contact").innerHTML= “Contact Us “ 29

30. Summary Document object model (DOM) is a hierarchy of objects representing web page elements Document object represents the web page, and contains all web page elements Document object contains arrays that can be used to identify Web page elements JavaScript can reference any Web page element through the DOM JavaScript, Fifth Edition30