1. JavaScript, Fourth Edition
Chapter 10
Introduction to the Document Object Model (DOM)

2. Objectives Learn about dynamic Web pages
Study the Document Object Model (DOM)
Learn how to open and close the Document object
Learn how to access document elements
Work with the Image object
JavaScript, Fourth Edition
JavaScript, Fourth Edition 2 2

3. Creating Dynamic Web Pages
Web pages are much more useful when dynamic
Dynamic
Web pages that respond to user requests through buttons or other kinds of controls
You can simulate limited dynamism and interactivity with simple hypertext links
Cannot produce true dynamic effects
To make Web pages truly dynamic, you need more than just XHTML
JavaScript, Fourth Edition

4. Creating Dynamic Web Pages (continued)
JavaScript, Fourth Edition 4

5. Creating Dynamic Web Pages (continued)
Dynamic HTML (DHTML)
Refers to a combination of technologies that make Web pages dynamic
A combination of JavaScript, XHTML, CSS, and the Document Object Model
JavaScript, Fourth Edition 5

6. Understanding the HTML Document Object Model
Document Object Model (DOM)
At the core of DHTML
Represents the HTML or XML of a Web page that is displayed in a browser
HTML DOM or XML DOM
W3C formally recommends using the XML DOM instead of the HTML DOM
Easier to use the HTML DOM with basic types of DHTML techniques
Each element on a Web page is represented in the HTML DOM by its own object
JavaScript, Fourth Edition 6

7. Understanding the HTML Document Object Model (continued)
JavaScript can access individual elements on a Web page and change them individually
Document object
Allows access to other objects that represent elements on a Web page
Image object
Used to manipulate the images on a Web page
JavaScript, Fourth Edition 7

8. HTML DOM Document Object Methods
JavaScript, Fourth Edition 8

9. HTML DOM Document Object Properties
JavaScript, Fourth Edition 9

10. Opening and Closing the Document Object
open() method
Creates a new document in a window or frame
Use the write() and writeln() methods to add content to the new document
close() method
Notifies the Web browser that you are finished writing to the window or frame
And that the document should be displayed
Later versions of Internet Explorer and Netscape
Do not require you to use the open() and close() with the write() and writeln()
JavaScript, Fourth Edition 10

11. Opening and Closing the Document Object (continued)
Always use the open() and close()
When you want to use the write() and writeln() methods
To update text displayed in an existing window or frame
Example
Web site for a flight-training school called Al’s Aviation
JavaScript, Fourth Edition 11

12. Opening and Closing the Document Object (continued)
JavaScript, Fourth Edition 12

13. Opening and Closing the Document Object (continued)
JavaScript, Fourth Edition 13

14. Using the IMAGE Object Image object
An image created using the <img> element
Used to dynamically change an image that is displayed on a Web page
Image objects for each <img> element are assigned to the elements of the images[] array
In the order that they appear on the Web page
JavaScript, Fourth Edition

15. Using the IMAGE Object (continued)
JavaScript, Fourth Edition 15

16. Using the IMAGE Object (continued)
src property
Allows JavaScript to dynamically change an image
Example
Add an image to the Al’s Aviation home page that asks visitors if they have ever dreamed of flying
Clicking the image displays another image that advertises a free “discovery flight” from Al’s Aviation
JavaScript, Fourth Edition 16

17. Using the IMAGE Object (continued)
JavaScript, Fourth Edition 17

18. Using the IMAGE Object (continued)
JavaScript, Fourth Edition 18

19. Animation with the Image Object
Create simple animation on a Web page
Combine the src attribute of the Image object with the setTimeout() or setInterval() methods
True animation involving movement requires a different image, or frame, for each movement
Create an animated sequence with JavaScript
Using the setInterval() or setTimeout() methods to cycle through the frames
Each iteration changes the frame displayed by an <img> element
JavaScript, Fourth Edition 19

20. Animation with the Image Object (continued)
JavaScript, Fourth Edition 20

21. Animation with the Image Object (continued)
JavaScript, Fourth Edition 21

22. Animation with the Image Object (continued)
Example
Modify the Private Pilot Training page so it includes an animated image of an airplane
JavaScript, Fourth Edition 22

23. Animation with the Image Object (continued)
JavaScript, Fourth Edition 23

24. Image Caching
Problem with the previous animation technique is that image appears to be jerky, erratic, or slow
URL for each image flickers in the status bar each time the image changes
JavaScript does not save a copy of the image in memory that can be used whenever necessary
Image caching
Eliminates multiple downloads of the same file
Temporarily stores image files in memory on a local computer
JavaScript, Fourth Edition 24

25. Image Caching (continued)
Steps for caching an image
Create a new object using the Image() constructor
Assign a graphic file to the src property of the new Image object
Assign the src property of the new Image object to the src property of an <img> element
Example
Modify the airplane animation in PrivatePilot.html to include image caching
JavaScript, Fourth Edition 25

26. Image Caching (continued)
Images must all be loaded into an Image object before the animation functions correctly
Use the onload event handler of the Image object
Example
Add an image onload event handler to the airplane animation that executes the animation after all the images have loaded
JavaScript, Fourth Edition 26

27. Accessing Document Elements
Must use one of the following methods of the Document object
getElementById()
getElementsByName()
getElementsByTagName()
JavaScript, Fourth Edition 27

28. Accessing Elements by Name
getElementsByName() method
Returns an array of elements with a name attribute that matches a specified value
Method always returns an array
Even if there is only one element
Example
Modify the PrivatePilot.html document so it uses the getElementsByName() method to refer to the element containing the airplane image
JavaScript, Fourth Edition 28

29. Accessing Elements by Tag Name
getElementsByTagName() method
Returns an array of elements that match a specified tag name
Method always returns an array
Even if there is only one element
Example
Modify the PrivatePilot.html document so it uses the getElementsByTagName() method instead of the getElementsByName() method to refer to the element containing the airplane image
JavaScript, Fourth Edition 29

30. Accessing Elements by ID
Extremely useful if you need to work with collections of elements
That have the same name attribute or are of the same type
getElementById() method
Returns the first element in a document with a matching id attribute
Example
Modify the PrivatePilot.html document so it uses the getElementById() method to refer to the element containing the airplane image
JavaScript, Fourth Edition 30

31. Modifying Elements with the innerHTML Property
Sets and retrieves the content of a specified element
Originally introduced by Microsoft into Internet Explorer browsers
W3C has not officially approved the innerHTML property as part of the DOM
Property allows you to retrieve and modify the contents of almost any element
Without having to reload the entire Web page
JavaScript, Fourth Edition 31

32. Modifying Elements with the innerHTML Property (continued)
Using the innerHTML property
Append it to an object representing the element whose value you want to retrieve or modify
Example
Modify the Al’s Aviation pages so they use the innerHTML property to set the value assigned to the <h1> element
JavaScript, Fourth Edition 32

33. Summary
DHTML is a combination of JavaScript, XHTML, CSS, and the Document Object Model
Document Object Model (DOM)
HTML DOM
XML DOM
Through the Document object, you can access other objects that represent elements on a Web page
Methods: open() and close()
JavaScript, Fourth Edition

34. Summary (continued)
Always use the open() and close() methods when you want to use the write() and writeln() methods
An Image object represents an image created using the <img> element
One of the most important properties of the Image object is the src property
Create simple animation on a Web page
Image caching temporarily stores image files in memory
JavaScript, Fourth Edition

35. Summary (continued)
Use the onload event handler of the Image object to be certain that all images are downloaded into a cache before commencing an animation sequence
Methods for accessing document elements
getElementsByName()
getElementsByTagName()
getElementById()
The innerHTML property sets and retrieves the content of a specified element
JavaScript, Fourth Edition 35