A Web page is made dynamic by applying JavaScript processing to the XHTML elements on that page. Up to this point you probably have considered XHTML tags simply as markup codes providing structure to page content and supplying mechanisms through which styling is applied to that content. Importantly, though, XHTML tags are also software objects. That is, all XHTML tags have properties and methods that can be programmed. As is the case with all software objects, properties refer to structural, visual, or content characteristics of the element; methods refer to actions the object can perform. XHTML tags, then, are programmable through JavaScript processing routines, or scripts, that set their properties and activate their methods in order to make Web pages dynamic.

The DOM Hierarchy

The programming interface to the XHTML objects appearing on a Web page is known as the Document Object Model (DOM). The DOM supplies the properties and methods associated with XHTML elements and defines how these properties are set and how these methods are activated to effect changes in the elements. More broadly, the DOM is the full collection of browser components both surrounding and comprising a Web page, including the browser itself and its component windows, frames, documents, forms, and XHTML elements. All of these browser components are programmable through the DOM.

The DOM is organized as a hierarchy of browser components. At the top-most level is the browser (navigator) object. At the next level down the hierarchy is the window object, the main browser window within which Web pages appear. Within the window are optional frame objects (if the window is divided into frames), and these window and frame objects contain the document objects representing Web pages. The page itself contains other objects, including XHTML tag objects and form objects, the latter composed of the various field objects, or controls, populating the form. This general hierarchy is shown in the illustration below, which identifies several of the objects comprising the Document Object Model for Web pages displayed in frames.

Identifying DOM Objects

In order to program DOM objects, they must be identified to the scripts that manipulate their properties and methods. The following table summarizes several of the references used within scripts to identify common DOM objects. These and other reference notations are explained and illustrated throughout these tutorials.

As you can see, script references to DOM objects use standard dotted notation to trace through the DOM hierarchy to identify particular objects. In some cases, there are short-cut notations that do not required the complete hierarchical path to an object.

A goodly portion of DHTML is in working with the properties and methods associated with the browser itself, with its windows and frames, and with the documents that occupy them. The largest part of DHTML, though, is in working with the properties and methods of XHTML elements appearing on a Web page. In most cases, this involves detecting the style settings of XHTML tags and changing these settings to change the appearance of, or to change the content enclosed by, these tags. In other cases, it involves calling up built-in methods to affect the behaviors of XHTML tags. Being able to make proper script references to XHTML elements is an important aspect of DHTML.

Referencing XHTML Elements

In order for a script to reference an XHTML tag, the element must be assigned an id. This value is assigned by including an id attribute inside the tag as shown in Figure 1-15.

<tag id="id"...>

The assigned id value must be unique within the document; that is, no two tags can have the same id. Also, the id value must be composed of alphabetic and numeric characters and must not contain blank spaces. Otherwise, you can assign any id to any tag.

Once an id is assigned, then the XHTML object can be referenced in a script using the notation shown in Figure 1-16.

document.getElementById("id")

Here, the id appearing inside the parentheses is the id value previously assigned to an XHTML tag. This reference is used, then, to detect or apply a property setting to the element or to activate a method associated with it.

The format shown in Figure 1-16 is the most common way to reference XHTML elements. An alternate is the notation document.all.id, and in some cases only the id itself is needed. In order to be consistent, these tutorials most often use the document.getElementById("id") method of reference.

Getting and Setting Style Properties

As noted, the most common way to apply DHTML is by changing the style properties of XHTML elements. The style properties associated with particular XHTML tags are referenced by appending the property name to the end of the object referent. A script can either detect the current style setting or change to a different setting using the general formats shown in Figure 1-17.

Detecting the current style setting of an object uses a script to reference the style.property of the object, giving the name of the style property of interest. For example, the following heading is created with an <h2> tag that includes an id to permit its identification to a script. The tag also includes an inline style sheet that sets the initial color style property of the heading. Code for this tag is given in Listing 1-1.

<h2 id="Head" style="color:blue">This is a Heading</h2>

With an id assigned, the tag can be referenced in a script to determine its current color. This reference uses the notation shown in Listing 1-2.

document.getElementById("Head").style.color

The notation document.getElementById("Head") makes reference to the XHTML tag in the current document with id="Head"; the notation style.color makes reference to the color style property of the tag.

In the same fashion, style properties of an XHTML element can be changed by assigning a different property value. For instance, a script can change the color of the previous heading with the following setting.

document.getElementById("Head").style.color = "red"

A different value is assigned to (=) a style property of an object reference. When the script containing this reference is run, the color of the heading changes immediately from blue to red.

Later, you will learn how to write scripts to dynamically get or set property values for XHTML tags. For now, though, you need to become familiar with the notation system used to reference these elements and how to specify the style properties to be detected or changed.

Applying Methods

A second popular way to apply DHTML to page elements is by activating methods built into the objects. Methods are behaviors that elements can exhibit, and these behaviors are activated through the script notation shown in Figure 1-19.

document.getElementById("id").method()

Appended to the object referent document.getElementById("id") is the name of the method being called. Methods are normally identified by a set of parentheses appended to its name. These parentheses can contain additional information needed by the method to perform its activity.

Consider, for example, a textbox that permits users to enter information that is subsequently accessed and processed by scripts on the page. A typical textbox is shown in Figure 1-20 with its code given in Listing 1-4.

Enter your name: <input id="Box" type="text"/>

Note that in order to begin typing in the textbox you first have to click inside the box to establish the location of a blinking text cursor. You must bring what is called "focus" to the textbox in order to enter text.

Through DHTML, however, you can save the user this extra mouse click by automatically establishing the blinking cursor in the textbox when the page loads. A script can, that is, bring focus to the textbox by activating its built-in focus() method. In a manner similar to referencing style properties for an XHTML element, its methods are activating by name. Below is a script reference that brings focus to the previous textbox.

document.getElementById("Box").focus()

If this method appears in a script that is run when the page first loads, then the cursor is automatically placed in the textbox and the user can immediately begin typing without having to click first. This technique is often used on pages containing fill-in forms to save the visitor the extra mouse click to begin data entry.

Again, you will learn later how to write scripts to call up methods associated with XHTML tags and with other DOM objects as well. For now, you need to become familiar with the notation used to reference these methods.

Learning DOM Components, Properties, and Methods

There are literally hundreds of property settings that can be applied to elements on a Web page; there are dozens of methods. In addition, there are properties and methods associated with the browser itself, with its windows and frames, with the documents appearing inside windows and frames, and with other components of the Document Object Model. A large part of learning DHTML, then, is in learning the numerous properties and methods available for the numerous DOM components, and in making proper reference to them in order to detect and set their property values and to activate their methods.