JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)
-
Upload
caitlin-lewis -
Category
Documents
-
view
221 -
download
1
Transcript of JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)
![Page 1: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/1.jpg)
JavaScript, Fourth Edition
Chapter 10Introduction to the Document Object
Model (DOM)
![Page 2: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/3.jpg)
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
![Page 4: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/4.jpg)
JavaScript, Fourth Edition 4
Creating Dynamic Web Pages (continued)
![Page 5: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/5.jpg)
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
![Page 6: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/6.jpg)
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
![Page 7: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/7.jpg)
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
![Page 8: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/8.jpg)
JavaScript, Fourth Edition 8
HTML DOM Document Object Methods
![Page 9: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/9.jpg)
JavaScript, Fourth Edition 9
HTML DOM Document Object Properties
![Page 10: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/10.jpg)
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()
![Page 11: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/11.jpg)
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
![Page 12: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/12.jpg)
JavaScript, Fourth Edition 12
Opening and Closing the Document Object (continued)
![Page 13: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/13.jpg)
JavaScript, Fourth Edition 13
Opening and Closing the Document Object (continued)
![Page 14: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/14.jpg)
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
![Page 15: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/15.jpg)
JavaScript, Fourth Edition 15
Using the IMAGE Object (continued)
![Page 16: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/16.jpg)
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
![Page 17: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/17.jpg)
JavaScript, Fourth Edition 17
Using the IMAGE Object (continued)
![Page 18: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/18.jpg)
JavaScript, Fourth Edition 18
Using the IMAGE Object (continued)
![Page 19: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/19.jpg)
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
![Page 20: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/20.jpg)
JavaScript, Fourth Edition 20
Animation with the Image Object (continued)
![Page 21: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/21.jpg)
JavaScript, Fourth Edition 21
Animation with the Image Object (continued)
![Page 22: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/22.jpg)
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
![Page 23: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/23.jpg)
JavaScript, Fourth Edition 23
Animation with the Image Object (continued)
![Page 24: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/25.jpg)
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
![Page 26: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/26.jpg)
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
![Page 27: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/27.jpg)
JavaScript, Fourth Edition 27
Accessing Document Elements
• Must use one of the following methods of the Document object– getElementById()– getElementsByName()– getElementsByTagName()
![Page 28: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/28.jpg)
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
![Page 29: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/29.jpg)
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
![Page 30: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/30.jpg)
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
![Page 31: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/31.jpg)
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
![Page 32: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/32.jpg)
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
![Page 33: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/33.jpg)
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()
![Page 34: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/34.jpg)
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
![Page 35: JavaScript, Fourth Edition Chapter 10 Introduction to the Document Object Model (DOM)](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649eb45503460f94bbc196/html5/thumbnails/35.jpg)
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