One of the most desired feature of the Web is that
it should be highly interactive. Unfortunat-ely, the language that the Web is made up of,
the Hyper Text Markup Language (HTML), now in version 4.0, produces an extremely static
output. The client (in this case your Web browser), simply reads the HTML file from the
Web server, and formats the information according to the tags placed in it. However, HTML
is not easy to manipulate due to the large number of tags available. Plus there is no
standard model by which program-mers can access parts of the document.

This is where the Document Object Model or DOM comes in. DOM lets
Web authors manipulate parts of the HTML document by accessing these parts as objects
within the document. It’s not a new concept, and in fact has been around from the
time of IE 3 and Netscape 3, although in a more primitive state. The standard has been
defined by the World Wide Web Consortium (W3C). To recognize the DOM in IE 3 and NS 3, the
W3C have designated it as DOM Level 0. The next version of the DOM was DOM Level 1, which
was released last year. Currently, a working draft for DOM Level 2 has been released.

To understand the DOM concept, let’s take an example. Take the
code of a simple Web page that just contains a button as follows:

Example
1

This specifies the following for the DOM of the page:

The Document’s TITLE is Example 1.

It contains a BODY with content,

BODY has a background color property of LightBlue.

The content consists of one BUTTON.

The Button has an ID property (name) of MyButton.

It has a VALUE (display) property of “Click Me”.

It has an event handler for the Click event.

The getTitle() event handler is not part of the DOM. It’s a
custom function (which we will define later) that uses the DOM to manipulate HTML objects.

The other method exists in IE 4 and above and is included in the
working draft of DOM 2. This is called Event Bubbling and means that the event is captured
at the lowest level and bubbles up through its ancestors right up to the top. This means
that you can process events for any element on the page and have common parts spread out
to the higher level elements. Try out this piece in IE 4 and Communicator 4x and see the
difference. Put it in an HTML file and click the button.

In IE 4, you get messages from both the event handlers. This way you
can achieve a lot of code reuse, by putting parts into a common ancestor for multiple
elements. In case you don’t want this to happen, simply add the line
window.event.cancelBubble= true to the end of the script like this:

.

This will disable the event “bubbling” up the DOM to the
parent element with an event handler (in this case the

).

Now that you know the fundamentals of the DOM, let’s get into
DHTML. As the name suggests, DHTML lets you change the look or the content of the Web page
without requiring a round trip back to the server. What this means is that the whole Web
page doesn’t have to be downloaded again. You can change the properties of an
existing element, add or remove elements or change the content of elements by using script
bound to events on which you wish these changes to occur. The scripts can be in any
scripting language that your browser or OS supports. Netscape uses JavaScript and IE can
use both JavaScript and VBScript. If you install a third party engine, like PerlScript,
you can use that too, but note that the scripts you write may be visible to you only as
the engine will not be installed on other client machines.

Retrieving or changing the property of an element in the document is
very simple. To demonstrate this, here are a few samples, which are in JavaScript but can
be easily converted to VBScript if you wish. Using the sample page, Example 1, given
earlier, let us write a small script that displays the Title of the document and then
changes it. Add the following lines in the section: <script>
function getTitle()
{
alert(document.title);
document.title = "Title Modified!";
}
</script>

Clicking the button now will bring up a box with the current title
(Example 1). Closing this box with execute the next line which modifies the title of the
document and places it in the browser window title bar. So with a script in the page, you
were able to change the property of the document itself. You can even change the
properties of the element that triggered the event. Replace the second line of script with

window.MyButton.value="Clicked!!!";

This line specifies that you wish to change the value property of
the element with ID MyButton, which is displayed in the browser window (the BODY of the
HTML document). Clicking the button now will change the text of the button to
"Clicked!!!".

DHTML has a number of events and objects that are either not
explicitly defined on the Web page or get defined at runtime. For example, the screen
object contains information about the screen resolution the client is working at. You can
use it to dynamically resize the content of your page to optimize for that resolution.
Certain properties like innerHTML, outerHTML, innerText and OuterText allow you to
actually change the content of the page. You can use these to actually change the textual
or HTML content of a page already loaded. You can also manipulate cascading style sheet
(CSS) properties like visible or hidden to show and hide elements according to some event,
leading to some nice features on your Website.

Of course, the scripts shown in this article are quite simple.
Its easy to create things like the image rollover effect, dynamic calculator, and
analog clock, all by using DHTML. One of the most impressive uses of pure DHTML is the
implementation of the classic "Asteroids" game on a Web page. This is playable
at www.microsoft.com/windows/ie/ie40/demos/asteroids.htm. Although it doesnt seem
possible even now, in future, we might end up playing games like Quake or Unreal through a
Web browser that simply downloads a DHTML Web page.