Document Object ModelDocument Object Model*
*Contents  *Index  *Topic Contents
*Previous Topic: DHTML Event Model Support for Data Binding
*Next Topic: Working with Windows, Frames, and Dialogs

Document Object Model


The Dynamic HTML document object model allows authors direct, programmable access to the individual components of their Web documents, from individual elements to containers. This access, combined with the event model, allows the browser to react to user input, execute scripts on the fly, and display the new content without downloading additional documents from a server. The document object model puts sophisticated interactivity within easy reach of the average HTML author.

What Is the Object Model?

The object model is the mechanism that makes Dynamic HTML programmable. It doesn't require that authors learn new HTML tags, and it doesn't involve any new authoring technologies. In fact, the object model builds on functionality that authors have used for creating content for previous browsers. Remember setting the value for a form element in script, or adding mouseover events to links in Internet Explorer 3.0? If so, you've been using a limited form of the object model to access your HTML with script.

What's different in the current object model is that now every HTML element is programmable. This means that every HTML element on the page can have script behind it that can be used to interact with user actions and change the page content dynamically. This event model lets a document react when the user has done something on the page, such as move the mouse over a particular element, press a key, or enter information into a form input. Each event can be linked to a script that tells the browser to modify the content on the fly, without having to go back to the server for a new file. The advantages to this are that authors will be able to create interactive Web sites with fewer pages, and users will not have to wait for new pages to download from Web servers, increasing the speed of their browsing and the performance of the Internet as a whole.

Accessing Elements with Script

Every HTML element is a scriptable object in the object model , with its own set of properties, methods, and events. However, to write script for each element object, the author must know how to get to an element.

The object model is focused around collections of elements, a hierarchy of groupings that the elements fall into. The most important of these collections are the all collection and the children collection. A Dynamic HTML document is a structured arrangement of elements—for instance, in the following example, each element has a scope of influence that depends on where in the document the tags appear. 

<HTML>
<BODY>
<DIV>
<P>Some text in a <B>paragraph</B>
<IMG id=image1 src="mygif.gif">
</DIV>
<IMG id=image2 src="mygif.gif">
</BODY>
</HTML>

The DIV element contains (and is the parent of) the P tag and the IMG called image1. Conversely, image1 and the P are children of the DIV. The IMG tag called image2, however, is a child of the BODY element. And all elements are children of the HTML element.

For each element object, there is an all collection that contains all the elements that are beneath that element in the hierarchy, and a children collection that contains only the elements that are direct descendants of that element. In the example above, the B would be in the DIV's all collection, but would not appear in the DIV's children collection. Similarly, the DIV is a member of BODY's children collection, but the P is not.

In addition to these collections for each element, the document itself (represented by the document object) has a number of element and non-element collections. The most important is an all collection that contains all the elements on the Web page. This collection is the primary way to access elements through script. For more information about using collections, see Scripting with Elements and Collections.

Events—Bubbling, Canceling, and Handling

Clicking a button, moving the mouse over part of the Web page, selecting some text on the page—these actions all fire events that a DHTML author can write code to run in response to the event. This particular piece of code is generally known as an event handler because that's what it does, handle events.

Event handling is not particular to Internet Explorer 4.0 or even Internet Explorer 3.x; Netscape Navigator 3.x and Communicator handle events as well. However, in Internet Explorer 4.0, the HTML elements on a Web page that are the source of the events, and the types of events that are generated, have been greatly expanded. Previously, only a small set of HTML elements could generate events: anchors, image maps, form elements, applications, and objects. With the Internet Explorer 4.0 event model, every HTML element on the page can be the source for a full set of mouse and keyboard events.

The following is a set of common events that every HTML element generates in Internet Explorer 4.0.

Mouse event Generated when the user:
onmouseover Moves the mouse pointer over (that is, enters) an element.
onmouseout Moves the mouse off an element.
onmousedown Presses any of the mouse buttons.
onmouseup Releases any of the mouse buttons.
onmousemove Moves the mouse pointer within an element.
onclick Clicks the left mouse button on an element.
ondblclick Double-clicks the left mouse button on an element.

Keyboard event Generated when the user:
onkeypress Presses and releases a key (full down-and-up cycle). However, if a key is held down, multiple onkeypress events are fired.
onkeydown Presses a key. Only a single event will be fired, even if the key is held down.
onkeyup Releases a key.

To help authors build code that is compact, simpler, and easier to maintain, Internet Explorer 4.0 introduces a new way to handle events—event bubbling. Windows®, OS/2, OSF Motif, and almost every other GUI platform uses this technique for processing events in their user interfaces. However, event bubbling is new to HTML and provides an efficient model for authors to incorporate event handling in their Web documents.

Previously, if an HTML element generated an event but no event handler was registered for it, the event would just vaporize, never to be seen again. Event bubbling simply passes these unhandled events to the parent element for handling. The event continues up ("bubbles up") the element hierarchy until it is handled, or until it reaches the topmost object, the document object.

Event bubbling is useful because it:

The following is a simple example of event bubbling in action. 

<html>
<body>
<div id=OuterDiv style="background-color: red" onmouseover="alert(window.event.srcElement.id);">
This is some text
<img id=InnerImg>
</div>
</body>
</html>

On this page, when the user moves the mouse pointer over the text, a dialog box appears with the text "OuterDiv." If the mouse then moves over the image, another dialog box appears with the text "InnerImg".

The interesting thing here is that the onmouseover event for the IMG element was handled even though it does not have an event handler. Why is this? The onmouseover event from the IMG element bubbles up to its parent element, which is the DIV element. DIV does have an event handler registered for the onmouseover event, so it fires and generates the specified dialog window.

Every time an event is fired, a special property on the window object is created. This special property contains the event object. The event object contains context information about the event that just fired, including mouse location, keyboard status, and (most importantly) the source element of the event.

The source element is the element that caused the event to fire, and can be accessed using the srcElement property on the window.event object.

In the example above, the dialog displays the id property of the event's srcElement.

Handling Rollover Effects

An author creates a rollover effect to make part of a page react when the user moves the mouse over it. With Internet Explorer 4.0, the process of creating a rollover effect is greatly simplified. 

<html>
<head>
<style>
.Item {
   cursor: hand;
   font-family: verdana; 
   font-size: 20;
   font-style: normal;
   background-color: blue;
   color: white
 }
.Highlight {
   cursor: hand; 
   font-family: verdana;
   font-size: 20;
   font-style: italic;
   background-color: white;
   color: blue
 }
</style>
</head>
<body>
<span class=Item>Milk</span>
<span class=Item>Cookies</span>
<span class=Item>Eggs</span>
<span class=Item>Ham</span>
<span class=Item>Cheese</span>
<span class=Item>Pasta</span>
<span class=Item>Chicken</span>

<script>
function rollon() {
  if (window.event.srcElement.className == "Item") {
     window.event.srcElement.className = "Highlight";
  }
}

document.onmouseover = rollon;

function rolloff() {
  if (window.event.srcElement.className == "Highlight") {
     window.event.srcElement.className = "Item";
  }
}

document.onmouseout = rolloff;
</script>
</body>
</html>

In this example, seven SPAN elements are initially set to use the class Item. When the mouse moves over any one of those elements, it will be changed to use the class Highlight.

Innovations in Internet Explorer 4.0 enable the following:

Canceling Events

All events bubble to their parent element (and recursively all the way up to the document object) unless the event is canceled. To cancel an event, you must set the window.event.cancelBubble property to "true" in the event handler. Note that unless canceled, events will bubble up the hierarchy and be handled by all parent elements registered to the event, even if the event has already been handled.

Canceling event bubbling should not be confused with canceling the default action for the event. Some events (for example, the onclick event on an anchor) have a default action. When an anchor is clicked, its default action is to navigate the current window to the URL specified in the src property. Returning "false" from an event handler, or setting window.event.returnValue to "false", cancels the default action but does not cancel event bubbling unless window.event.cancelBubble is also set. Conversely, canceling an event's bubbling doesn't cancel its default action.

The last example showed how you could use event bubbling to apply a common effect to a set of elements. What if you wanted to exclude an element from that effect? Simply change the line: 

<span class=Item>Ham</span>

to 

<span class=Item onmouseover="window.event.cancelBubble = true;" onmouseout="window.event.cancelBubble = true;">Ham</span>

Now, no matter how many times you move your mouse over "Ham," it will not change style. This is both the onmouseover and onmouseout events were canceled; they did not bubble through to the document, so the document was never given the opportunity to handle those events for "Ham."

Special Considerations

At any one time, you can have an onmouseover event only on a single object. This means that in the following case: 

<DIV id=MyDiv>
<IMG id=MyImg>
</DIV>

If you were to move your mouse over the IMG, the order of events would be as follows: 

MyDiv:: onmouseover
MyDiv:: onmouseout
MyImg:: onmouseover

Moving your mouse off the IMG fires the MyDiv::onmouseover event again.

At times, the author might want to detect when the mouse moves outside a DIV to perform some special effect. It is not enough to simply trap the onmouseout event. To make this easier, Internet Explorer 4.0 indicates the source element (fromElement) and target element (toElement) for the onmouseover and onmouseout events. You can use these properties in combination with the contains method to tell when the mouse has moved outside a region.

The following example shows the use of these properties and methods. 

<html>
<body id=Body>
<div id=OuterDiv style="width: 100px; height: 50px; background: red" 
onmouseover="over();" onmouseout="out();">
<img id=Img1>
<img id=Img2>
<img id=Img3>
</div>
<script>
function over() {
  var s;
  s = "onmouseover: "+window.event.srcElement.id+" from: "+

window.event.fromElement.id+" to: "+window.event.toElement.id;
  alert(s);
}

function out() {
  var s;
  s = "onmouseout: "+window.event.srcElement.id+" from: "+

window.event.fromElement.id+" to: "+window.event.toElement.id;
  alert(s);

  if (!(OuterDiv.contains(window.event.toElement))) {
     alert("Out Now");
  }
}
</script>

</body>
</html>

Technical Topics

arrowr.gifWorking with Windows, Frames, and Dialogs

arrowr.gifScripting with Elements and Collections

arrowr.gifUnderstanding the Event Model

arrowr.gifCross-Frame Scripting and Security

Up Top of Page
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.