DOM: The Road Map to Your Web Page


When you write a letter to someone, you address the envelope, naming the country, city, street, number, and person for whom the letter is intended. If you put this process in JavaScript, it might look something like this:

usa.newyork.sesameST.123.ernie


Using this address, you can send a message to the intended recipient. The postal carrier simply uses the address you list and a road map to find the correct location. As long as there are no other Ernies at 123 Sesame Street in New York, you can feel safe that the addressee will receive your message.

If you need to send a message to someone else who happens to live at the same address as Ernie, however, all you have to do is change the name:

usa.newyork.sesameST.123.bert


Although the addresses are very similar, each is still unique.

The DOM allows you to find the "address," or node, of different elements on your Web page. You can then use JavaScript to send the object at a particular node a message telling the object what to do. The node can return messages about itselfwhat it is, where it is, and what it is up to.

The DOM describes a path beginning with the window itself and moving down through the various objects on the Web page. Each element represents a node within the document, which is defined by an HTML tag, creating a tree-like structure in which each node object is a leaf in the tree. For example, Code 12.1 is broken down into nodes, as shown in Figure 12.2.

Code 12.1. A simple Web page with its node structure broken down, as shown in Figure 12.2.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Undestanding DOM</title> </head> <body> <form action="#" method="get"> <p><input type="text" size="24" /></p> </form> <div>      <img src="/books/3/292/1/html/2/alice28a.gif"  alt="Alice" />      Your Message Here </div> </body></html>

Figure 12.2. The Web page node for Code 12.1 begins at the top with the window, moving down to each individual element on the page.


The following example is the path for the image called alice1:

window.document.images.alice1


This addresses an image object in the document in the current window called alice1.

If you needed to access an image called alice2, you would use this address instead:

window.document.images.alice2


You can use this path to make a JavaScript function send the object a message, such as what image it should be displaying (src) or what CSS styles it should use (style):

window.document.images.alice1.src = "alice2.gif"


When you send a letter within the same country, you don't need to indicate the country in the address. The post office assumes it's going somewhere in the same country. The same is true of indicating which window you're referencing with your JavaScript. It's simply assumed to be the window that the code is in. So rather than starting your path with the window object, you begin the path with document:

document.images.alice1.src="alice2.gif"


Web pages created with CSS can have their properties changed while they are on the screen (that is, dynamically) through a scripting language and the DOM (Table 12.1). Because it's available almost universally, most people use JavaScript as their scripting language. CSS, however, can be affected by any scripting language that your browser can handleVBScript in Internet Explorer, for example.

Table 12.1. What DOM Allows

CAPABILITY

COMPATIBILITY

Change the font and text properties of an element while it's on screen

IE4, FF1, S1, O3.5, DOM1

Change the z-index of elements

IE4, N4, S1, O3.5, DOM1

Hide or show elements on the screen

IE4, FF1, S1, O3.5, DOM1

Change the position of elements

IE4, FF1, S1, O3.5, DOM1

Animate elements on the screen

IE4, FF1, S1, O3.5, DOM1

Allow visitors to move objects on the screen

IE4, FF1, S1, O3.5, DOM1

Reclip the visible area of an element

IE5, FF1, S1, O3.5, DOM1

Change the content of a page after loading

IE5, FF1, S1, O3.5, DOM1


The W3C-Standard DOM

The W3C defines the Document Object Model as:

"… a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page" (w3.org/DOM/#what).

Clear enough? Basically, this definition says that the DOM is not dependent on any specific operating system or programming language, and allows scripting languages to access and change your Web page.

Earlier versions of both Netscape Navigator and Microsoft Internet Explorer included their own DOMs, which didn't work the same way. This was like having two different systems for addressing letters in the same country. The letters from one mail carrier could not be sent to addresses defined by the other mail carrier. This meant that Web designers had to create two versions of their code, and then determine which browser it was being viewed in to deliver the right address.

The good news is that the W3C published a standardized DOM, to which all modern browsers adhere. Score one for standards!

We will be using only the W3C standard DOM in this book, but for more details on the earlier Netscape and Internet Explorer DOMs, see the sidebar "The History of the DOM."

The History of the DOM

The W3C realized that there would be a need to link scripting languages to objects on a Web page, so it diligently began working out the best method. Unfortunately, the browser manufacturers couldn't wait, and they introduced their own DOMs before the W3C could set the standard. Better late than never, the W3C released its standardized DOM late in 1998, which has been embraced by the browser-building community.

The Netscape Layer DOM

The Netscape Layer DOM lets you write scripts to control elements created with the <layer> tag and elements created with CSS positioning. This DOM lets you control the position, visibility, and clipping of the element. Changes made in these properties with either layers or CSS positioning occur immediately on the page.

The Layer DOM does not provide access to CSS properties other than the positioning controls. Thus, you cannot change the font, text, list, mouse, color, background, border, or margin of an object in Netscape 4 after the page has loaded unless you reload the page.

The Layer DOM does not work in Netscape 6 or later, and there was never a version 5 of Netscape. When Netscape started planning Netscape 6 (code-named Mozilla), it decided to start from scratch and attempt to make the browser as standards-compliant as possible. Unfortunately, and to the confusion of many Web designers, this meant abandoning any technologies that were never going to be standards, including the <layer> tag and the Layer DOM.

The Internet Explorer All DOM

The Internet Explorer All DOM allows you to write scripts that can access any element on the screenat least, any element that Internet Explorer understands. These elements include CSS properties, which let you control the position and visibility of elements on the screen, as well as their appearance. Any changes made in these properties occur on the page immediately, and Internet Explorer redraws the page to comply.

Thus, any changes made in the font, text, list, mouse, color, background, border, margin, position, or visibility of an object are immediately discernible.


The code presented in this chapter uses the W3C standardized DOM, which will not work in Internet Explorer 4 or Netscape Navigator 4 (Table 12.2).

Table 12.2. DOM Versions

BROWSER

VERSION

DOM

Netscape

4

Layer

 

6+

W3C

Internet Explorer

4

All

 

5+

All, W3C

Safari

1+

W3C

Opera

3.5+

W3C

Firefox

1+

W3C





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net