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

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

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

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

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

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

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

HTML DOM Document Object Methods JavaScript, Fourth Edition 8

HTML DOM Document Object Properties JavaScript, Fourth Edition 9

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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