The Dynamic HTML Object Model

Nancy Winnick Cluts
Microsoft Corporation

Updated: October 20, 1997

Contents
Abstract
But Object Model Sounds So Scary!
What is the Dynamic HTML Object Model?
Element Model
Event Bubbling
2-D Layout
Summary

Note: We've restored our link to the Mr. Alien Head page and included updated 2-D layout sample code in this article.

Abstract

Dynamic HTML is a group of technologies designed to create and display more interactive Web pages. It includes Dynamic Styles, Dynamic Content, 2-D Layout, Data Binding, and Multimedia Effects. The Dynamic HTML Object Model makes all of these features programmable. With Dynamic HTML, you can create Web pages that have all the power of a Microsoft® Windows®-based application.

When you add all of this together, you get better performance for the client and the server, fewer round trips to the server (because attributes for elements can be updated on the fly on the client side), Web pages that are easier to author, and a truly interactive experience for the user.

This article explains the basics of the Dynamic HTML Object Model and how it works.

But Object Model Sounds So Scary!

The first time I was asked to write about Dynamic HTML, I was told about "the Internet Explorer 4.0 Object Model." I had no idea what that meant, but it sure sounded complex and scary to me. So I did what any self-respecting developer/writer would do: I decided that there were other, more pressing things to write about. Unfortunately, my hesitance did not make the whole thing go away. Turns out it wasn't that difficult at all. Hopefully, I will explain it to you in such a fashion that you won't feel any pain either.

In this article, I will tell you about the different features you will be able to use in Internet Explorer 4.0. I also think that it will be cool to show you the code and explain it, and -- since I'm skating on the bleeding edge here -- I'll go ahead and show you the features in action via links to the Web gallery. Of course, you'll need to be running Internet Explorer 4.0 in order to see this in action. If you aren't, you'll get the same old boring, static page. I recommend trying Internet Explorer 4.0 .

What is the Dynamic HTML Object Model?

The Dynamic HTML Object Model doesn't define a whole new set of tags or attributes; it makes the tags, attributes, and CSS attributes that you know and love totally programmable. Existing JavaScript™ Object Models provide access to a small set of elements on the page. Further, only a small subset of their attributes can be modified, and only a small subset of events can be fired from them. Dynamic HTML provides access to all HTML elements and full access to every attribute. Additionally, the set of events that can be accessed for each object is much more complete than that of JavaScript Object Models.

The Dynamic HTML Object Model makes it easier to write code due to event bubbling. Event bubbling is a process by which objects can either handle events or allow events to "bubble up" to the parent object. This capability enables you to write less code to handle events. You can let the parent object handle generic events, so that each object doesn't have to, or provide default actions.

It is important to note that the Dynamic HTML Object Model is entirely language- and paradigm-neutral, which means that a Web page can be controlled via scripting, controls, or Java applets. The Dynamic HTML Object Model has been designed so that you can add Dynamic HTML functionality to pages, and they will still display well in older browsers that don't support that functionality. The object model described in this document is currently being proposed to the W3C.

Element Model

Dynamic HTML provides what is known as an element model. This means that every element on the page is accessible and all of its properties, methods, and events are exposed. You can handle events, such as button clicks or mouse-overs, for each HTML tag on a page. Once you trap these events, you can provide certain reactions to each event via scripting (Visual Basic® Scripting Edition [VBScript], JavaScript, and so on). For example, you can handle the mouse-over event for a tag by changing its font to a larger font when the user hovers over the object, and dynamically changing the text of the object when the user clicks it. Using the Dynamic HTML Object Model, you can do things that you couldn't easily do before. The advantage of this approach is twofold: you get simpler coding and you get code reuse. How can anyone argue with that?

For Internet Explorer 4.0 examples, see the latest on event bubbling and Dynamic Styles.

Event Bubbling

Currently, you can handle a button-click event using Internet Explorer 3.0, but if you want to define a default behavior based on a button click, you have to copy and paste that code to script each object. Dynamic HTML provides a container hierarchy for its HTML documents. Using Internet Explorer 4.0, you write the code once and direct the parent object, via scripting, to handle the event. This is known as event "bubbling." In more HTML-like terms, this means that you can have a scenario as follows:

The user clicks an image.
The <IMG> tag receives the event.
The <IMG> tag does not want to handle the event.
The <IMG> tag is inside the <A> tag, and the <A> tag receives the click event.
If you want the <IMG> tag to handle the event, cancel the bubble via this code: window.event.cancelbubble = true.

Event bubbling allows you write more compact code (because you are writing the code only once) for common events. For an example of this, check out the code I have included in the section below from Mr. Alien Head.

2-D Layout

Another area of improved functionality is the ability to provide content in two dimensions such that an object can be "on top" of another object. You can also move the object around while the user is viewing the page. This means that you can create a page where one object, such as a jet, can fly past another object -- either on top of the object or behind it. One of the samples in the Web gallery, Mr. Alien Head, shows just this type of functionality. [October 20, 1997 Editor's note: The Alien Head sample was just updated.] This functionality is actually a superset of Netscape's <LAYER> tag. The following code from Mr. Alien Head demonstrates how to let items move around on a page.

<TITLE>Alien Head</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
    var curElement;
    function doMouseMove() {
      var newleft=0, newTop = 0
      if ((event.button==1) && (curElement!=null)) {
        // position alien

        newleft =
        event.clientX -
        document.all.OuterDiv.offsetLeft -
        (curElement.offsetWidth/2);

        if (newleft<0) newleft=0;
        curElement.style.pixelLeft = newleft;
        newtop =
        event.clientY -
        document.all.OuterDiv.offsetTop -
        (curElement.offsetHeight/2);

        if (newtop<0) newtop=0
        curElement.style.pixelTop = newtop;
        event.returnValue = false;
        event.cancelBubble = true;
      }
    }

    function doDragStart() {
      // Don't do default drag operation.
      if ("IMG"==event.srcElement.tagName)
        event.returnValue=false;
    }

    function doMouseDown() {
      if ((event.button==1) && (event.srcElement.tagName=="IMG"))
        curElement = event.srcElement
    }

    document.ondragstart = doDragStart;
    document.onmousedown = doMouseDown;
    document.onmousemove = doMouseMove;
    document.onmouseup = new Function("curElement=null")
  </SCRIPT>
  <SCRIPT FOR="alienhead" EVENT="onmousedown" LANGUAGE="JavaScript">
    // Do not move the alienhead or allow it to be dragged
    event.cancelBubble=true
    </SCRIPT>
    </HEAD>

Summary

I've covered the basics of the Dynamic HTML Object Model. This article did not go into all of the features of Dynamic HTML -- you can get that by reading the host of articles in the MSDN Online Web Workshop's DHTML section.