Basic Components of the Dynamic HTML Object Model

Now that you've seen what can be done with the Dynamic HTML Object Model, let's take a look at its components. (In the discussion that follows—and throughout the book—you'll notice that we often use the shorter term "Object Model" or "Dynamic Object Model" to refer to the Dynamic HTML Object Model.)

Objects

As you've seen in previous chapters, an HTML page contains elements, which are usually defined by opening and closing tags surrounding specific content. Some elements are contained within others; a table row (TR) element is contained in a table element, for example.

Every element on a page is represented in the Dynamic Object Model as an object, the basic unit of the Object Model. Examples of such elements include an image, a span of text, the body region of an HTML document, or even an ActiveX control—in short, anything described in the text of an HTML file.

The Object Model is a hierarchical representation of all these objects. At the highest level of the hierarchy is the window object, which represents the frame or browser window in which the current page is displayed. All the rest of the objects on a particular page are subobjects of that page's window object. In other words, all HTML elements are represented as lower in the Object Model hierarchy than the window object.

If an element on the page is contained within another element (such as a cell within a table), it is represented in the Object Model as a subobject of the object that contains it. A subobject is also called a child of the object that contains it, while the containing object is known as a parent. Thus, a table is parent to any child TR elements inside it, and the window object is parent to all other objects on a page.

The most common way to refer to an object in Internet Explorer is by using the ID attribute to give it a name. For instance, the code <IMG ID="MyImage"> assigns the name MyImage to an image object. Alternatively, the NAME attribute can be used: for example, <FORM NAME="F1">. NAME is commonly used in forms.

Once an object has been named, it can be referred to easily through script, as you will see in Chapter 7. In almost all cases, an object's name should be unique; using the same name for multiple objects can cause a variety of problems.

An object can contain properties, events, methods, and collections. The Object Model exposes all these aspects of an object, making them accessible and controllable. The next few sections provide a general overview of properties, events, methods, and collections; a full description can be found on the SBN Workshop Web site and on the CD that accompanies this book. On the CD go to Workshop (References); DHTML, HTML & CSS; and HTML References. To get to the online version, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD, and choose DHTML Properties, Events, Methods, and Collections.

Properties

In traditional HTML, you can modify an element by setting its attributes. The attributes contain information describing that element. Just as an HTML element is represented in the Dynamic Object Model by an object, an element's attributes are represented by properties of that object. For instance, here is a simple image tag:

 <IMG SRC="oldpic.gif" WIDTH="10" ID="MyImage">

This <IMG> tag has three HTML attributes: SRC, WIDTH, and ID. On the Web page, this code creates an image element with three attributes; the ID attribute names the image, while SRC and WIDTH specify the source graphic and the width of the image, respectively. This resulting element is represented in the Object Model by an object, and the three attributes are represented as the src, width, and id properties of that object. In the Object Model, these properties are accessible—that is, they can be changed or read by script code. How this is accomplished is covered in Chapter 7.

In addition to the src, width, and id properties, the Object Model makes many other properties available for an image object such as the one in the previous example. For instance, even though our sample HTML does not include a HEIGHT attribute, the height property of the image object is accessible through the Object Model. In fact, the IMG object has nearly 50 properties, which describe everything from the image's alignment to the date the source file was created.

Events

Internet Explorer tracks just about everything that happens on a page. For instance, if a user clicks a picture, the browser knows that the mouse button was clicked and that it was clicked while the mouse pointer was positioned on that particular image. An action or occurrence on the page, such as a mouse click, is referred to as an event. When an event occurs on the page, the item that receives the event notifies the Dynamic Object Model that the event has taken place. This is known as firing the event. An event is trapped or handled if script is present that responds to the firing of that event. Such script is known as an event handler.

Browsers support many types of events, with special emphasis on mouse, keyboard, and focus events. Here are a few examples:

onmousedown event	Fired when the user presses the mouse button
onmouseover event	Fired when the user positions the mouse pointer over an object
onmouseout event	Fired when the user moves the mouse pointer outside the boundaries of an object
onkeypress event	Fired when the user presses a key
onfocus event	Fired when an object receives the focus

NOTE
An item has the focus when it is selected. Only one item can have the focus at any particular time. For instance, when you work with a large online form that contains many text entry fields, you can type in only one field at a time. The field you can type in is the one that currently has the focus. Clicking a different field sets the focus to that field; pressing the Tab key switches the focus to different items on a page.

The onclick event is a special event that can be fired by either the mouse or the keyboard. This event is designed to make a page more accessible to a user who doesn't have a mouse. Here are some of the cases that fire this event:

The user clicks an object with the mouse.

An object has the focus, and the user presses the Enter key.

A check box or an option button (also known as a radio button) has the focus, and the user presses the Spacebar.

The user presses an object's keyboard access key (often known as a hot key). The hot key is set with the accessKey property.

Browsers also support a variety of other, more specialized events, including:

onhelp event	Fired when the user presses the F1 key
onload event	Fired when an object finishes loading
onresize event	Fired when the window is resized
onscroll event	Fired when the window is scrolled

Many additional events exist and are described on the SBN Workshop Web site and on the CD that accompanies this book. Netscape Navigator supports most of the same events as Internet Explorer, but it does not support trapping them on as wide a variety of objects.

EVENT BUBBLING

The Internet Explorer Object Model supports a capability referred to as event bubbling. When an object fires an event, it also notifies its parent object that the event has occurred. The parent object then notifies its parent object. The event continues to travel, or "bubble," up the hierarchy until it either reaches the top or the bubbling action is explicitly canceled. A real-world equivalent might be asking your boss for a substantial raise and then having the request travel up the corporate hierarchy until it reaches someone who has the authority to deal with the request. You can find more details about event bubbling in Chapter 7.

Methods

Methods describe the actions an object can take. For instance, the window object has a method named open, which directs the window to open a new browser window.

Some methods are fairly generic, whereas others are quite specific. For instance, almost all objects support the focus method, which simply gives the item the focus (and results in the object firing the onfocus event). Other methods are particular to a single object. For example, an ActiveX control used to show movies might support a method named Run that starts the movie. Another example is the reload method, supported only by the location object, which causes the current page to be reloaded in the browser.

Collections

Collections are, in general, the least used part of the Dynamic Object Model. Collections are lists of items that are associated with a particular object. Just as a museum has a collection of paintings or a library has a collection of books, the Object Model also maintains collections. For instance, the document object supports a collection named images, a list of all the image objects that appear in the document, in the order in which they appear in code.

In this chapter, we have investigated the basic concepts behind the Dynamic HTML Object Model. In Part 2, we will cover scripting, which lets us apply the concepts outlined in this chapter. Scripting is a powerful, flexible, and easy way to manipulate the components of the Dynamic Object Model as well as to accomplish many traditional programming tasks.