javascript, fourth edition chapter 10 introduction to the document object model (dom)

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


Creating Dynamic Web Pages (continued)


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


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


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


HTML DOM Document Object Methods


HTML DOM Document Object Properties


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()


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


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


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


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


Animation with the Image Object (continued)



• Example– Modify the Private Pilot Training page so it

includes an animated image of an airplane


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


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


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


Accessing Document Elements

• Must use one of the following methods of the Document object– getElementById()– getElementsByName()– getElementsByTagName()


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


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


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


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


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


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()


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


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 chapter 10 introduction to the document object model (dom)

Documents