javascript, fourth edition chapter 10 introduction to the document object model (dom)
TRANSCRIPT
JavaScript, Fourth Edition
Chapter 10Introduction to the Document Object
Model (DOM)
JavaScript, Fourth Edition 2JavaScript, Fourth Edition 22
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 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 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 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 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 8
HTML DOM Document Object Methods
JavaScript, Fourth Edition 9
HTML DOM Document Object Properties
JavaScript, Fourth Edition 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 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 12
Opening and Closing the Document Object (continued)
JavaScript, Fourth Edition 13
Opening and Closing the Document Object (continued)
JavaScript, Fourth Edition 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 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 17
Using the IMAGE Object (continued)
JavaScript, Fourth Edition 18
Using the IMAGE Object (continued)
JavaScript, Fourth Edition 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 20
Animation with the Image Object (continued)
JavaScript, Fourth Edition 21
Animation with the Image Object (continued)
JavaScript, Fourth Edition 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 23
Animation with the Image Object (continued)
JavaScript, Fourth Edition 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 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 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 27
Accessing Document Elements
• Must use one of the following methods of the Document object– getElementById()– getElementsByName()– getElementsByTagName()
JavaScript, Fourth Edition 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 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 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 31
Modifying Elements with the innerHTML Property
• 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 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 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