Download 01501_ch10 - CarlPetersheim.us

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
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
3
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
14
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
• 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
33
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
34
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