Understanding the IE Object Model

Once the World Wide Web began to gain popularity, there was a great concern about preserving standards, so that the exchange of information would remain as open as possible. The Document Object Model (DOM), like HTML, is one of those standards. Basically, the Document Object Model provides a means for you to interact programmatically with the document displayed by the browser. Both Netscape Navigator and Internet Explorer have a document object model; however, there are some large differences between the two. Despite the presence of standards documents, there is always room for interpretation. (If you are interested in reading more about the Document Object Model standards, or any of the other standards that apply to the World Wide Web, see http://www.w3.org.)

We are going to take a look at the Internet Explorer Document Object Model. It is a rich environment that will allow you a measure of control over the document in the browser. Before we jump in, let's have a quick look at the Document Object Model itself and some of its parts. These are shown in Figure 8-3.

Figure 8-3. Internet Explorer Object Model

As you can see, the Window object is the parent of all of the other objects in this model. Each document will always have at least one Window object. A Window object will always have at least one Document object. Without the Document object, there would not be much for you to do with the Document Object Model. This figure shows the hierarchical nature of the Document Object Model. Like many of the object models that Visual Basic developers work with, you can access objects via their parent and use their properties to enhance your client-side development.

The object model is too extensive to document fully here. The next section displays some tables that describe the properties and methods of some of the objects that are programmatically available in the DOM. These tables are not exhaustive references to the objects; we have included the methods and properties that we consider to be the most useful and interesting. This will give you an idea of the scope and power of the Document Object Model.

8.3.1 The Window Object

The Window object is the top-level object in the object model. When you reference the Window object, you are actually interacting directly with the browser and the browser window itself. The Frame object in the object model is also just a particular type of Window object the same properties and methods that apply to the Window object apply to the Frame object as well.

Some of the Window object's significant properties are shown in Table 8-2; its methods appear in Table 8-3.

8.3.2 The Document Object

The Document object represents the document displayed in a window or frame. Its properties are shown in Table 8-4 and its methods are listed in Table 8-5.

8.3.3 The Elements Collection and HTML Intrinsic Controls

The Elements collection is a collection of all the HTML intrinsic objects contained in a form. You can access the Elements collection with a code fragment like the following:

Dim oElements Set oElements = Document.frmForm.Elements

where frmForm is the name of the form on which the Elements collection resides. The Elements collection has two read-only properties:

length

Indicates the number of HTML intrinsic controls in the collection.

Item

Retrieves a specific HTML intrinsic control based on either its name or its ordinal position in the collection, starting at 0. The highest ordinal position in the collection is one less than the value of the length property.

You can then access a particular control with a code fragment like:

Set oCtrl = Document.frmData.Elements.Item("txtName")

However, the Item property is the default member of the Elements collection, so this can be shortened to:

Set oCtrl = Document.frmData.Elements("txtName")

The default member of the Form collection is the Elements collection, though, so this statement can be further shortened to:

Set oCtrl = Document.frmData("txtName")

or, even more clearly:

Set oCtrl = Document.frmData.txtName

Unfortunately, the way in which you programmatically work with an HTML intrinsic control depends on the control type; HTML intrinsic controls do not have a uniform set of properties, methods, and events. Each, however, does have a type property, which allows you to determine the type of control with which you are working.

The following sections will examine the HTML intrinsic controls and their most important properties, methods, and events.

8.3.3.1 The textbox control

The HTML textbox control is defined by the TYPE=Text> tag. Working with the textbox control is very straightforward, and closely resembles working with a Visual Basic TextBox control or a VBA UserForm TextBox control. The control's properties include the following:

The most useful methods of the textbox control (none of which take any parameters) are:

Of the events supported by the textbox control, the following are most useful:

8.3.3.2 The checkbox control

The HTML Checkbox control is defined by the TYPE=checkbox> tag. Working with the Checkbox control is very straightforward, and closely resembles working with a Visual Basic checkbox control or a VBA UserForm checkbox control. The control's properties include the following:

The most useful methods of the checkbox control (none of which take any parameters) are:

Of the events supported by the checkbox control, the following are most useful:

8.3.3.3 The radio button control

The HTML radio button control is defined by the TYPE=radio> tag. Because radio buttons reflect a set of two or more mutually exclusive choices, there is always more than one radio button with the same name on a form. The individual button's VALUE attribute determines which of those mutually exclusive choices the button represents, while the presence of the CHECKED attribute causes it to be the selected button of the set.

Since multiple radio buttons have the same name in the Elements collection, you cannot retrieve the selected radio button directly from the Elements collection. Instead, you must iterate the collection with the For Each...Next construct, extract the button whose Selected property is True, and retrieve its value. The code to do this looks something like the following:

Dim oElement, oElements, oRadio Dim sValue ' Get reference to Elements collection Set oElements = Document.frmTest.Elements ' Iterate collection looking for selected radio button For Each oElement in oElements If oElement.Type = "radio" And oElement.Checked Set oRadio = oElement Exit For End If Next ' Make sure a radio button was selected If Not oRadio Is Nothing Then sValue = oRadio.Value ' Perform any other processing End If

If the form has multiple sets of radio buttons, then you can look for the radio button of a particular name whose Checked property is True.

The radio button control's properties include the following:

The most useful methods of the radio button control (none of which take any parameters) are:

Of the events supported by the radio button control, the following are most useful:

8.3.3.4 The list box

A list box is defined by the ... tag, with its individual items defined by

tags. Depending on whether the MULTIPLE attribute is present, multiple items can be selected at a single time. Each item in the list box is a member of the Options collection, which is returned by the list box's Options property. In a single-selection list, you can determine the item selected by examining the SelectedIndex property. In a multiple-selection list, you can determine which items are selected by iterating the Options collection and checking whether the item's Selected property is True. If it is, you can retrieve the value of its Index and Text properties. The following code fragment illustrates this by forming strings containing the index numbers of selected items and the text of selected items:

Dim oElements, oDropDown, oOption Dim sSelected, sItems Set oElements = Document.frmTest.Elements Set oDropDown = oElements("lstColors") For each oOption in oDropDown.Options If oOption.Selected Then sSelected = sSelected & cStr(oOption.index) & vbCrLf sItems = sItems & oOption.Text & vbCrLf End If Next

The list box has the following properties:

The list box's most useful methods (none of which take any parameters) are:

Of the events supported by the radio button control, the following are most useful:

Individual Option objects, which represent individual items in the list box, have the following properties:

8.3.3.5 Command button controls

HTML supports three types of buttons:

• The Submit button (defined with an TYPE=submit> tag), which submits form data to a web server
• The Reset button (defined with an TYPE=reset> tag), which resets form data to its default values
• A general-purpose command button (defined with an TYPE=button> tag), whose function is defined programatically

The three button types share a common set of properties and methods. The most commonly used properties are:

The most commonly used methods are:

Finally, the most commonly used events are:

8.3.4 The History Object

The History object represents the history list of recently opened documents. It has only one property, which is shown in Table 8-6, and three methods, which are listed in Table 8-7.

8.3.5 The Event Object

The Event object can be accessed inside of an event handler and provides additional information about that event. Its major properties are listed in Table 8-8.

8.3.6 Using the Document Object Model

Let's take a look at a simple example, Example 8-10, and then build on that until we are exploiting a few of the different options available. It's not the most useful piece of code ever written, but it does demonstrate a piece of the Document Object Model hierarchy.

Example 8-10. A simple example using the Document Object Model

Demonstrates a simple use of the Document Object Model

First, we declare a variable called varTagName in the showme_onclick event procedure. We will set this variable equal to the value returned by the seventh member of the all collection, which corresponds to the seventh tag in the document. In this instance, this is the input button that we have created. When the user clicks the button, this page will generate a message box with the name of the tag. It is important to note here that tags are zero-based, so the first tag in the document will actually be tag 0. You can also refer to the tag by its name.

In Example 8-11, we are using the hierarchy to work into the individual elements of a table. First we reference the table by the tag name "table1," and then we can set the row and cell references after that. In this instance, we have given the table a tag name so that we can easily refer to it. If you do not give your tags names, then you must work with their index position on the page. If you look at the Name property of a tag with no name assigned, you will see the tag definition.

Example 8-11. Using client-side scripting to create a table

The Document Object Model allows us to work with the individual elements on the page pretty effectively. You could apply this type of logic to make dynamic changes based on user interaction. This is the basis of Dynamic HTML (DHTML) coding. The Document Object Model is an active living concept, and there is currently an update to the standard being considered. The nice thing is that with each iteration of the standard, the DOM has become a more powerful tool for developers. For more information on DHTML, see Dynamic HTML: The Definitive Reference, Second Edition, by Danny Goodman (O'Reilly).