Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

CHAPTER 26
Advanced Microsoft Dynamic HTML

by Jim O'Donnell

In this chapter

Microsoft’s Implementation of Dynamic HTML 638

Internet Explorer Document Object Model 638

Dynamic HTML Events and the event Object 646

Using Dynamic HTML with Styles 650

Dynamic HTML and the Data Source Object 652

Position HTML Elements with Dynamic HTML 655

Changing HTML Documents On-the-Fly 658

Dynamic HTML Filters 660

Microsoft’s Scriptlets 665

Find Out More About Dynamic HTML 667

Microsoft’s Implementation of Dynamic HTML

Dynamic HTML is Microsoft’s term for the new technology it has embedded in its Internet Explorer Web browser, versions 4 and higher. Through Dynamic HTML, you can create Web pages that can change dynamically and have a much higher degree of interaction than in the past. The heart of Dynamic HTML is Microsoft’s new Document Object Model. This model is what provides you, and scripts that you write, with the capability to interact with and change any element in an HTML document.

This chapter shows some examples of the kinds of things you can do with Dynamic HTML (and related technologies, such as Scriptlets). None of the examples shown represents anything you could not have done in the past—now, however, it is possible to do them using HTML alone. Dynamic HTML is a new technology still under development. People are just scratching the surface of what is possible with it. This chapter identifies some of the best places to look for examples and more information.

Internet Explorer Document Object Model

The heart of Dynamic HTML is the new Document Object Model that Internet Explorer supports. You can think of every element in an HTML document as an object—including the HTML tags and information that they contain—as well as aspects of the Web browser itself and any included Java applets, ActiveX Controls, or other elements. The Document Object Model is what exposes these objects, making them accessible to you through scripts that you can write and include with the document.

Before Internet Explorer 4 and Dynamic HTML, the Document Object Model was very limited. It could expose Java applets, ActiveX Controls, and the Web browser window properties, such as window size and location. The model exposed a very limited number of HTML elements, however. The HTML tags that were supported by past object models were primarily limited to HTML Forms elements.

Microsoft’s Dynamic HTML changes all that. With Dynamic HTML, every HTML tag is exposed through the Document Object Model. Not only that, but the contents of all HTML container tags are also exposed. Therefore, not only can you change the styles or formats associated with a <P> tag, for instance, but you can also change its text contents. And, this is all done on the client side, without any need to interact with the Web server.

The remainder of this section discusses aspects of the Document Object Model for Internet Explorer 4. It is important to at least understand the different terms used with the object model—object, property, method, collection, and event— and what they mean. This section gives you a good basis for understanding the Dynamic HTML samples later in the chapter.

---

NOTE:  For the remainder of this chapter, references to Internet Explorer should be interpreted to mean Internet Explorer version 4 and higher (unless otherwise noted). Although Internet Explorer version 5 may support the W3C Document Object Model standard if the standard is available before version 5 is finalized, the browser will probably be backward compatible with the version 4 object model.

---

Understanding Objects and the Object Hierarchy

Figure 26.1 shows the hierarchy of objects that is part of the Internet Explorer Document Object Model. In the simplest terms, an object in this model is a recognizable element of the whole. Objects can contain other objects, however; thus, all the objects are organized into an object hierarchy.

FIGURE 26.1  The preceding boxed elements of the Document Object Model represent the additions that Dynamic HTML uses.

As you look at Figure 26.1, the window object, at the top of the hierarchy, includes everything you see within a given Web browser window. That object can and will, in turn, contain other objects. This object hierarchy is used when referencing these objects, with the following sample notation:

window.document.links[0]

This line of code refers to the first link object contained in the current document of a given Web browser window. (Normally, unless you are authoring Web pages that use multiple windows, you can omit window.)

A description of each type of object in the Internet Explorer Document Object Model follows:

•  window—Represents an open Web browser window.

•  location—Information for the current URL.

•  frames—A collection of window objects, one for each separate frame in the current window.

•  history—Information for the recently visited URLs.

•  navigator—Information about the browser itself.

•  event—Maintains the state of events occurring within the browser.

•  screen—Statistics on the physical screen and the rendering capabilities of the client.

•  document—Contains all the information attached to the current HTML document.

•  links—A collection of links referenced in the current document.

•  anchors—A collection of anchors present within the current document.

•  forms—Can contain a number of other objects corresponding to the forms elements within it; there is one forms object for each HTML form in the document.

•  applets—Contains information about the Java applets present.

•  embeds—Has information about all objects included using the <EMBED> tag; this object can also be referenced using the synonym plugins.

•  scripts—A collection of all the script elements within the document.

•  images—A collection that contains one element for each image in the document.

•  filters—Contains a collection of the filter objects associated with the document.

•  all—Allows access to all the HTML tags that are a part of the document.

•  selection—Represents the current active selection, a user-selected block of text within the document.

•  styleSheets—A collection of the style sheets attached to the current document.

•  body—Accesses the <BODY> section of the document.