The Document Object Model

Most of the interactivity in Web pages today is accomplished using DHTML. When you write DHTML code, you use scripting (typically JavaScript) to control the CSS attributes of HTML elements on a page. For example, the flyout menus that are so commonly seen on the Internet these days (see Figure 24.2) are created by causing page elements to appear when a mouse is hovered over a menu item and disappear when the mouse pointer is removed from the menu item. These types of menus are often referred to as DHTML menus because they use DHTML for their functionality.

Figure 24.2. Flyout menus, such as this one on the Jimco Add-ins Web site, are created with DHTML code.

graphics/24fig02.jpg

In order to script the elements on a Web page, the JavaScript code must have some way to programmatically access those elements. It does this using the Document Object Model, or DOM, for the browser. For the most part, the DOMs for the major browsers are very similar, but it doesn't necessarily mean that code that will work in one will work in the other. Even so, with a bit of work, you can write JavaScript code that is compatible with all the major browsers available today.

NOTE

The World Wide Web Consortium (W3C) does have a standard for the DOM, but most Web browsers do not strictly conform to it. Instead, most browsers implement their own DOM that includes specific functionality only for that browser.

At the top of the DOM hierarchy is the window object. Underneath the window object, you will find an extensive list of objects far too many to cover in a single chapter of this book. However, you will learn about some of the commonly used objects in the DOM.

NOTE

For complete coverage of the Internet Explorer DOM, visit http://iedom.frontpagelink.com. For complete coverage of the Netscape DOM, visit http://nsdom.frontpagelink.com.

The `window` Object

The window object refers to the browser window itself and is used to manipulate the browser window and its elements. For example, if you want to change what is displayed in the status bar (the lower portion of the browser window), you use the status property of the window object.

The following code example changes the status bar message:

 <html> <head>    <script language="javascript">    <!--       function changeStatus(msg) {          window.status = msg;          return true;       }    //-->    </script> </head> <body onload="changeStatus('Welcome!');"> </body> </html>

When this page is opened in the Web browser, the status bar text will say Welcome!. Note that when the changeStatus function is called, the text Welcome! is passed to it in parenthesis. When the function runs, the text that is passed to it is assigned to the msg variable, which is then displayed in the status bar.

Using this method of passing a value to a function makes it convenient to reuse the function for other purposes. For example, if you need to display a different message in the status bar of the browser at a different point in the page, you simply call the changeStatus function again and pass the text that you want to display to it. This function can be made even more robust by saving it an external .js file and simply linking that file to each page that needs to use the changeStatus function.

TIP

I offer an add-in on my Web site called Scripter that makes it easy to link a .js file to multiple files in one easy step. You can download it from http://www.jimcoaddins.com.

The `document` Object

One of the objects under the window object in the DOM hierarchy is the document object. The document object is one of the most frequently used objects by JavaScript programmers because it provides access to all the elements on the Web page.

In Internet Explorer, the all collection of the document object contains a reference to every element on the Web page and is often used by Internet Explorer developers to reference a particular item. For example, consider this <div> tag:

 <div >Web page border goes here.</div>

If you wanted to get a reference to this <div> tag, you would simply use the following line of code:

 document.all("border")

By appending the ID of the <div> to the all collection, this line of code returns a reference to the <div> with that ID.

That works great in Internet Explorer, but it won't work in Netscape because Netscape doesn't support the all collection of the document object. Therefore, a better method to get a reference to the <div> tag is to use the getElementById method of the document object. The following code will get a reference to the <div> tag, and it will work in both Netscape and Internet Explorer:

 document.getElementById('border')

This code will return a div element that references the <div> tag called border. Once you have that reference, you can then programmatically interact with the <div> tag, as you will see later.

NOTE

Many JavaScript developers use the document.all collection to determine if a user is using Netscape or Internet Explorer. If document.all doesn't return anything, you know that the browser must be Netscape.

There are many other objects in the browser's DOM. By reading through the documentation provided by Microsoft and by Netscape Communications, it should be easy for you to take advantage of what the DOM has to offer. The best way for you to start down that road is to write a little code, so let's write a few sample scripts that implement some real-world scenarios.

Figure 24.2. Flyout menus, such as this one on the Jimco Add-ins Web site, are created with DHTML code.

The window Object

The document Object

The `window` Object

The `document` Object