Beyond HTML

PCQ Bureau
New Update

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. size="2">


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<br></br> 1



This specifies the following for the DOM of the page:

  • The Document’s TITLE is Example 1.
  • It contains a BODY with content,
  • Advertisment
  • BODY has a background color property of LightBlue.
  • The content consists of one BUTTON.
  • The Button has an ID property (name) of MyButton.
  • Advertisment
  • 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.


    Each and every object in the HTML specification has a number of

    prope-rties and events defined for it. But do you need to explicitly define each of these

    for every object that you have on your page? No, of course not. Most of these have some

    default behavior associated with them. As an example, you don’t have to define what

    happens when you click a tag. The browser automatically transports you

    to the specified location. Or when you click the Submit button on a form, it’s

    automatically sent to the form processing page. However, if you wish to override these

    defaults, you can easily do so. This is by specifying the property within the angle braces

    or associating a custom event handler with an event (as in the case of the button above).

    By using these custom properties and event handlers, you can achieve Dynamic HTML. Dynamic HTML
    COLOR="#000000" size="2">

    Before I get into how and what DHTML

    is, there are a couple of more concepts in the DOM that you should understand. These

    concepts involve how the browser processes an event. The first one, called Event

    Capturing, is popular in Netscape browsers. In this, the event is captured and passed to

    the highest-level block element in the DOM. This is the element that completely encloses

    the element, which actually received the event. That is, if you have an image within an

    anchor tag (), and if there is an event

    like mouse-move detected over both, it’ll be passed to the highest level present,

    which is the anchor (A). Now this may seem logical at first, till you realize that the IMG

    will never receive any event anytime! So any event handler you write must be processed in

    the tag even if it’s meant for the . You can see this in the

    classic Image Rollover effect (where moving your mouse over an image quickly changes it to

    another one for a nice special effect) that has become so po
    size="2">pular everywhere.

    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.


    value="Button" id=button1 name=button1 onclick="alert(‘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:


    value="Button" id=button1 name=button1 onclick="alert(‘Button

    clicked’); window.event.cancelBubble=true;">.

    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:

    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!!!"; size="2">

    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


    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 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.