IE5 Dynamic HTML Programmer's Reference

IE5 Dynamic HTML Programmer's Reference

by Alex Homer, Chris Ullman



Product Details

ISBN-13: 9781861001740
Publisher: Apress
Publication date: 01/13/1999
Edition description: 1998
Pages: 267
Product dimensions: (w) x (h) x 0.05(d)

Read an Excerpt

Chapter 3: The Dynamic HTML Browser Object Model

Now that we've explored the properties that are available in the Dynamic HTML implementation of style sheets, we can move on to look at the other major difference between traditional and Dynamic HTML. Since the advent of Netscape 2 (the first browser to provide a documented object model), it has been possible to use the scripting code in a page to access both the browser environment and the contents of the page itself. These early object models made access OK for controls, but access was still limited when it came to most other things in the page. So while you could access such things as HTML text boxes and list boxes, and Java applets or ActiveX controls, you couldn't get at the real contents of the document. The text, images, headings and other page contents remained temptingly out of reach.

This all changed with the introduction of DHTML. Almost anything that's visible in the page, plus many things that aren't, can be accessed through the extensions to the object model. This is the subject of this chapter. We'll take an overview of the whole structure, then investigate the most useful objects. We'll continue this process in the next chapter, by looking at the objects that are most useful for integrating our script into a web page.

In this chapter, we'll cover:

  • The browser object model in outline — how it compares to older browsers
  • A brief tour of the basic window objects
  • A look at some of the more useful objects and collections
We can't hope to give an in-depth explanation of the entire structure in this book, and there's no real need to do this anyway. Much of the structure is simple, andsome is only used in very special cases. You will, however, find definitions and listings of the items that make up the structure in Appendix A of this book.

Introducing the Browser Object Model

If you haven't used scripting code in a web page before, you may not have realized that the browser is built around a structured set of objects. It's these objects that provide an interface between the HTML that creates the page, and the internal workings of the browser itself. To make the whole thing easier to visualize and work with, the various objects are organized into a structure called the object model.

Why Do We Need An Object Model?

When we define a normal static web page with HTML, we don't need to know about the browser's object model or the structure of the browser itself. Even when we display several documents in different frames, we just give each frame a name, and then TARGET new pages to the appropriate one. For example, suppose we have defined a frameset which contains a frame named mainwindow, like this:
<FRAME NAME="mainwindow" SRC="">
Then we can load a different page into it using the TARGET attribute of the <A> tag:
<A HREF="" TARGET="mainwindow">Web Developer's website</A>
So why do we need an object model?

The Object Model and Scripting

If you've used a scripting language like VBScript or JavaScript before, you'll know that the example above gives an extremely simplified view. In reality, all the frames in the browser window are stored by the browser as child objects of the main window. They are organized into a collection (a structure rather like an array — we'll come back to collections later). To refer to the main window in a scripting language, we can reference it using the keywords parent or top, depending on its position in the hierarchy. The parent keyword refers to the window immediately above the current window in the hierarchy, which may be the top window, while top always refers to the topmost window. If we were in one window in a frame, and wanted to refer to another window (named mainwindow) held in the same frameset, we would use the following code:

parent.frames ("mainwindow").location.href = ""
Don't worry about the code we've used here for the time being — we'll look at what all of these references mean later in the chapter.

Throughout this chapter we'll be using VBScript in our examples, unless we specifically mention otherwise. However, many of the properties and methods definitions in code are identical in JavaScript (remembering that JavaScript is case-sensitive, while VBScript is not).

You may well have met the 'page targeting' keywords _top and _self before. In the TARGET attribute of an <A> tag, _top is used to load a page into the main browser window, instead of into a frame within the window — effectively replacing the frameset. _self can be used to load a page into the current window and maintain the current frame layout, though this is rarely used. The top and self keywords in scripting languages have the same meaning as these.

The concept of things belonging to collections and having parents and children implies that there is an underlying object model structure. In this chapter, we'll start to explore the object model, and see how to use it in Dynamic HTML.

The Object Model in Overview

The browser object model is, in fact, simply an interface between the DHTML source code in the page, and the browser software routines that create the window and fill it with the elements defined in the page. Exactly how these routines fill the browser window (or render the page) is unimportant to us. Dynamic HTML simply defines what the results should be, not how the processes should be implemented.

We can think of the browser object model as being a part of the browser, while Dynamic HTML is (in theory at least) a universal browser-independent document definition language. This means that all browsers that host Dynamic HTML must provide the same core objects in their object model. Otherwise, it would be impossible to create pages that performed properly on different browsers.

So, we can think of the browser's object model as being a way of connecting our pages to the browser. The object model provides a range of objects, methods, properties and events that are present and active within the browser's software, and are exposed to the HTML and scripting code in the page. We can use these to communicate our wishes back to the browser, and hence to the viewer. The browser will carry out our commands, and update the page(s) it displays.

Objects, Methods, Properties and Events

So far we've talked about objects, methods, properties and events — and assumed that you're familiar with these terms. No doubt you've heard them used many times, but we'll recap briefly here before going on to look at the browser object model itself.


Modern software design is very much concerned with objects. Objects are self-contained parts of a program such as the browser, and each object carries out specific functions. The key is that each object will usually store its own data in its own format and will also contain the code routines (called methods — see the definition below) that are required to manipulate that data.

You can think of an object as being rather like a video recorder, in that we put the tapes in and set the timer, but all the work of recording and playing back goes on inside the black box. We just tell it to record or play back, and we don't need to know what's actually going on inside. The video recorder stores its data (our TV program) itself, in its own format (a video cassette), without us having to worry about how it's doing it.


Methods are an object's way of letting us do something with it. Our video recorder has methods built in that allow us to record or play back TV programs. The big advantage of having an object provide methods is that it takes away the worry of knowing what's going on inside the object. Rather than telling the video recorder the exact patterns of magnetism to lay down on the tape, and how to interpret the sound signal, we execute its Record method by pressing a couple of buttons.


If methods are our way of telling an object what to do, events can be thought of as the object's way of telling us that something happened. It's likely that our trusty video recorder will have something we could term an EndOfTape event. This occurs when the end of the tape is reached, and stops the motor to prevent it tearing the tape off the spool. Here, the event is being used internally to execute the Stop method of the TapeWindingMotor object inside the video recorder.

However, it's likely that the video recorder will also tell us that the end of the tape has been reached, by changing the display on the front or by rewinding and automatically ejecting the tape. This allows us to respond to the event, perhaps by putting the tape back in its library case — this is called event handling.


Properties should be no problem to grasp by now. We regularly used the term Chapter 2, when we were referring to the style properties of the elements in the page. All we really mean by a property is some setting, or stored value, that applies to an object. The object will usually expose a set of properties that affect the appearance or behavior of the object, and some that just provide information about it.

In our video recorder example there are read/write properties — these are properties that we can change in order to adjust the behavior or appearance of the video recorder. These might include the record speed setting and the time setting on the clock. The video recorder will also have some read-only properties — these might include the age, the price, and the working condition. As you can see, there are often read-only properties that we would like to be able to change, but can't — and DHTML is no exception.

The 0bject Model Diagram

Being able to describe the object model of the browser is a necessity if we are to understand how all the parts of the hierarchy fit together. The usual way to do this is to show a tree-style diagram, with the main objects at the top and the subsidiary ones below: this is what we've done here. The object model diagram is really an abstract representation of the available objects and how they are related to one another. In a real page scenario, we work with instances of these objects, whose relationship reflects the structure that is shown here.

The top-level object in the browser hierarchy is the window. This is the parent object for every other object in the structure.

You'll notice that some of the 'things' in the object hierarchy are objects, and some are collections. In general, collections have a plural name, i.e. anchors rather than anchor. The one that breaks the rule is the all collection — we can only assume that calling it the alls collection would have sounded a little odd.
The diagram shows how each of the objects is related — and there are quite a few of them altogether. If you've used VBScript or JavaScript in any depth before, you'll recognize many of them. To maintain backwards compatibility with pages designed for older browsers, the object model for DHTML is a superset of that found in prior versions of Internet Explorer. ...

Table of Contents

What is this Book About?1
Why Internet Explorer 5 Edition?2
Who Should Read This Book?2
What Do I Need to Use This Book?2
Where you'll find the Sample Code3
What is the World Wide Web?3
Some Terminology5
Tell Us What You Think6
Customer Support7
Chapter 1Dynamic HTML - The Next Generation9
The Foundations of Dynamic HTML10
Document Definition Languages10
Hypertext Markup Language (HTML)11
Extensible Markup Language (XML)12
What's New in Internet Explorer 513
What Hasn't Changed13
What's Actually New14
Working with DHTML15
Getting Started with Dynamic HTML22
The Background Knowledge You'll Need22
Choosing a Text Editor23
The Browser - Internet Explorer 524
Chapter 2Style Sheets, Absolute Positioning and Z-Order27
Using Styles and Style Sheets28
Why use Style Sheets?28
Creating Style Sheets30
Implementing Style Sheets36
Applying Style Sheets to Specific Text38
Dynamic HTML Style Properties40
Displaying and Positioning Elements41
Going 2.5-D in a Web Page42
Fixed Table Layouts48
Controlling Overflow and Visibility49
Easy 3-D Text Effects50
Adding Script to HTML Pages51
Where to Place Your Script52
Creating Script Routines in a Page53
Using a Script to Manipulate the DHTML Properties54
Chapter 3The Dynamic HTML Browser Object Model65
Introducing the Browser Object Model66
Why Do We Need An Object Model?66
The Object Model in Overview67
The Window Object73
The Properties of the Window Object73
The Methods of the Window Object75
The Events of the Window Object80
The Window's Subsidiary Objects82
The History Object82
The Navigator Object83
The Location Object83
The Event Object85
The Screen Object88
The data Transfer Object89
A Window Object Example Page91
Chapter 4The Dynamic HTML Document Object97
The Document Object98
The Properties of the Document Object98
The Methods of the Document Object102
The Events of the Document Object104
The Document Object's Collections107
Working with Document Collections108
A Document and Collections Example112
The Selection Object115
Selections and Text Ranges116
The Filters Collection118
What is a Filter?118
Chapter 5Scripts and Event Handling129
What are Events?129
What is Event Driven Programming?130
Where Do Events Come From?130
Reacting to Browser Events131
Connecting Script to Events132
Responding to Events136
Getting Information about an Event136
Examining the Source of an Event138
Manually Firing Events139
Bubbling and Canceling Events140
The Event Object's Control System140
Finding the Source Element142
The Event Object's Position Properties147
The Dancing Buttons Page155
Chapter 6Manipulating the Contents of the Page163
Changing the Elements in a Page164
Content Manipulation Properties and Methods164
The Element 'Content' Properties165
The Element InsertAdjacent Methods167
A Content Manipulation Sample Page168
Working with TextRanges177
What is the TextRange Object?178
TextRange Object Summary183
A TextRange Example Page185
Creating Dynamic Tables190
The rows and cells Collections191
A Dynamic Table Sample Page191
Chapter 7Dialogs, Forms and Data Binding199
Creating New Windows and Dialogs200
New Browser Windows200
Modal Dialog Windows202
Modeless Dialog Windows203
A Windows and Dialogs Example204
Dynamic HTML Forms214
Creating Dynamic Forms216
A Dynamic Form Example219
Using Objects and Controls230
Using Java Applets230
Using ActiveX Controls232
Data Binding in Dynamic HTML235
The Downside of Server-Side Processing235
Providing a Data Source236
Data Binding Attributes237
Chapter 8Introducing XML and Behaviors243
Introduction to XML243
XML Terminology244
Uses for XML246
XML in IE5246
Data Islands and XML Files247
XML Data Binding248
Introduction to Behaviors252
DHTML with Behaviors253
Building and Using Behaviors253
A Working Example of Behaviors254
XML Elements254
Properties - the PROPERTY Element259
Methods - the METHOD Element261
Using Behaviors262
Behavior Object Model Extensions265
The Reference Section269
Appendix AThe Browser Object Model273
The Object Model In Outline273
HTML and Form Controls Cross Reference286
Appendix BDHTML Properties, Methods and Events291
List of Properties, Attributes and CSS Equivalents292
Listing of Dynamic HTML Methods326
Listing of Dynamic HTML Events338
Appendix CDynamic HTML Tags343
Appendix DCommon HTML Tags by category399
Appendix ECSS Properties407
Visual Formatting Model411
Visual Formatting Model Details412
Visual Effects414
Generated Content, Automatic Numbering and Lists414
Paged Media416
Colors and Backgrounds417
Font Properties418
Text Properties420
User Interface422
Aural Style Sheets423
Appendix FHTML Color Names and Values427
Colors Sorted by Name427
Colors Sorted by Group432
Colors Sorted by Depth438
Appendix GSpecial Characters in HTML445
Appendix HA Tutorial in VBScript451
What is VBScript?451
How to Use this Tutorial451
Step-by-Step Exercises452
Lesson 1Adding VBScript to Web Pages452

Customer Reviews

Most Helpful Customer Reviews

See All Customer Reviews