Until now, users had little control over the style and content of Web pages once they were rendered. The static nature of HTML has limited the quality of user interaction that Internet developers could provide.
HTML was originally developed as a document format to exchange information over the Internet. It provided a platform-independent method for describing a document in a bandwidth-efficient manner. It was also relatively easy to interpret. As the focus of the Web shifted primarily from the scientific and educational communities to the commercial world, HTML was extended to provide richer formatting capabilities. Web pages became more artistic and compelling (largely through the creative use of images), but the underlying style and content of the pages remained fixed.
The advent of scripting and the ability to insert ActiveX™ controls and applets gave Web pages their first breath of life. For the first time, users had the ability to interact with the Web. However, this level of interaction was a far cry from what people were used to with traditional applications and games. Until now, client-side scripting has been unable to directly access and change a Web page's HTML, although it could completely overwrite it. User interactions generally required communication with the Web server, which resulted in poor responsiveness.

Microsoft has now done for HTML what it did so well (with COM) for the world of PC software: they objectized it. By expanding the current HTML Object Model to include HTML elements themselves, Microsoft has exposed the content and style of Web pages to programmatic access and control. HTML tags, style sheets, text, tables, ActiveX objects, and applets can be dynamically modified without interaction with the Web server. By giving client-side scripting the capability to control the content and style of a Web page, responses to user interaction can be handled on the client's PC, resulting in the almost instantaneous feedback that users have come to expect from software applications.
Data manipulation, formatting, and content changes are no longer solely dependent on Web servers. By capitalizing on the distributed computing model, server resources and bandwidth are conserved. The expanded object model has also enhanced the formatting capabilities of HTML. The location of objects and images can now be precisely specified. Overlapping and the control of an element's z-order are also possible. The movement of images can be achieved without the overhead of an animated GIF or other type of graphic.
There is more to Dynamic HTML than just client-side scripting. ActiveX controls can also access the HTML Object Model, paving the way for third-party custom controls that perform predefined functions on the contents of a Web page (this will be demonstrated in both this article and "Writing Internet Explorer 4.0 Controls with Visual Basic 5.0," by Joshua Trupin, in this issue).

Before diving into the HTML Object Model, it's important to understand the role it plays. Although Microsoft Internet Explorer appears to be a single monolithic program, it is actually made up of a group of components. The executable IEXPLORE.EXE is a small program that simply serves as a container, providing a frame to Microsoft's WebBrowser object (SHDOCVW.DLL). This object implements the basic browser features such as forward and back navigation, favorites, page refresh, and printing.
The WebBrowser object itself does not have the ability to display an HTML page or any other type of document. It allows users to view and manipulate documents by acting as an ActiveX document container, loading the ActiveX document server that knows how to process the current URL. By taking this approach, Microsoft has made its browser document-independent—it can be used to view Word documents and Microsoft Excel spreadsheets as well as HTML pages. Moreover, documents can be viewed within their own environments; not only will Internet Explorer display a Word document, it provides the standard Word user interface as well.

Figure 1: HTML Viewer

Figure 2: Executing Scripts

In the case of Web pages, the WebBrowser object loads Microsoft's HTML Viewer (MSHTML.DLL). This ActiveX document server provides the functionality needed to interpret, display, and provide programmatic access to HTML pages (see Figure 1). This entree to the HTML pages is achieved through client-side scripting.
While the HTML Viewer knows HTML, it doesn't know how to execute code. When a <SCRIPT> tag is detected within a Web page, the HTML Viewer enlists the services of a scripting engine. The appropriate engine is loaded based upon the script's language (VBSCRIPT.DLL for Visual Basic® Script or JSCRIPT.DLL for JScript™ and JavaScript). Once loaded, the HTML Viewer passes the code contained within the <SCRIPT> element to the scripting engine, where it is executed (see Figure 2).
Client-side scripting was developed as a method of accessing the properties and methods of objects and acting upon their events. As the host of the scripting engine, the HTML Viewer is responsible for exposing the objects that the script operates on. In addition to exposing a Web page's ActiveX controls, the HTML Viewer maintains and exposes a set of objects that allow access to elements of the browser and the content of the current Web page. Collectively, these objects are referred to as the HTML Object Model. The HTML Viewer exposes this object model as a set of COM interfaces. ActiveX controls within the Web page can also access the object model through these interfaces.

The top two tiers of the Dynamic HTML Object Model, illustrated in Figure 3, consist of seven types of objects and one collection. The foundation of the object model, the window object, represents the browser's window. All other objects inherit from, and are accessed through, this one object.

The item method provides access to the individual element objects within the collection. It takes a single parameter which can either be the element's name, id, or position:

 scripts.item(3).property 


 images.item("logo").method

 scripts(3).property


 images("logo").method

The tags method returns a collection of element objects which represent the specified type of tag:

 IFrameTags = all.tags("IFRAME")


 AreaTags = links.tags("AREA")

The all collection consists of every tag contained within the Web page whether or not the HTML Viewer recognizes them. The anchors, frames, forms, images, links, scripts, applets, and styleRules collections consist of subsets of the all collection—each one containing the element objects that correspond to its specific set of HTML tags (see Figure 4).
The forms collection is composed of <FORM> tag element objects. Each of these objects exposes an elements collection that consists of the <INPUT>, <SELECT>, <OBJECT>, <APPLET>, <TEXTAREA>, and <IMG> element objects contained within the form.
The body object provides access to the textual content of the Web page through the createTextRange method. It also supports the align method as well as the methods and properties common to all element objects.

Programmatic manipulation of the content of Web pages is accomplished through the use of TextRange objects. These objects represent the stream of text that is associated with a particular tag. The <BODY>, <DIV>, <MARQUEE>, <TD>, and <TH> element objects expose a createTextRange method, which creates and returns a TextRange object.

The object's htmlText property allows the HTML source within the range to be read, while its pasteHTML method allows HTML source to be inserted into the range. The text property allows non-HTML text to be read from and written to the range. As an example, the line of code

 MyText.pasteHTML("<P>This is a test</P>")

 MyText.text = "<P>This is a test</P>"

would generate the HTML "&lt;P&gt;This is a test&lt;/P&gt;" and display "<P>This is a test</P>" in a browser.
TextRange objects expose a group of move methods that allow the text to be walked through by character, word, or sentence. They also expose a group of find methods that provide the ability to search for specific text or the text associated with a specific element or tag. Modifying the start and end properties or invoking the expand or collapse methods allows the amount of text included in a range to be changed. The execCommand method provides the ability to change the attributes of the range's text (such as bolding or font size) without requiring knowledge of HTML.
The selection object, which is exposed by the document object, supports a createRange method that creates a TextRange object from a copy of the user's current selection.

The Dynamic HTML Object Model incorporates an event model that allows events to bubble up through the document's element hierarchy. That is, they are processed first by the target element and then by each of its parent elements until it is finally processed by the document object itself. All elements fire the following standard keyboard and mouse events:

 onkeydown    onmousedown    onmouseover    ondblclick
 onkeypress   onmousemove    onmouseout     onclick
 onkeyup      onmouseup        

 <SCRIPT language=VBScript>
      sub picture1_onclick()
      msgbox("Element was processed at the document level")
      end sub
 </SCRIPT>
 <IMG id=picture1 src="Image1.gif">
 
 <SCRIPT language=VBScript>
      sub EventHandler()
      msgbox("Element was processed at the document level")
      end sub
 </SCRIPT>
 <IMG onclick="EventHandler()" src="Image1.gif">

 <html>
 <body>


 <SCRIPT language=VBScript for="anchor" event="onclick()">
    window.event.returnValue = false
 </SCRIPT>


 <SCRIPT language=VBScript for="anchor" event="ondblclick()">
    window.location.href = window.event.srcElement.href
 </SCRIPT>


 <A id=anchor href="http://www.microsoft.com"> Hyper-link</A>


 </body>
 </html>