Dynamic HTML Object Model | Programming Microsoft Visual InterDev 6.0

The DHTML Object Model is the cornerstone for all work in DHTML. Using the object model, you can access and manipulate virtually anything in the document. You can read and set properties of elements, call their methods, and intercept and process events. Figure 7-1 shows the DHTML Object Model supported in the Internet Explorer 4.0 browser.

The DHTML Object Model represents an evolution from the earlier object models seen in Netscape Navigator 2.x and 3.x and in Internet Explorer 3.x. If you have written client-side scripts for these browsers, you'll be able to pick up DHTML very quickly.

Having a rich object model available to script against for thin-client applications allows them to become more interactive and responsive to your end users. This goes a long way in helping you achieve the same type of look and feel that end users typically experience from client/server applications. In planning any migrations of existing client/server applications to Web-enabled versions, it's well worth exploring what you can do with DHTML to preserve the user experience.

Figure 7-1. The DHTML Object Model in the Internet Explorer 4.0 browser.

As a simple example of what can be done with DHTML, take a look at the code in Figure 7-2. This code comes from the DynamicHTML.htm document in the Chap07 folder on the CD-ROM.

Figure 7-2. DHTML code that traps a mouse click event and changes various elements on the page.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE>Dynamic HTML</TITLE> <SCRIPT LANGUAGE=javascript> <!-- function ChangeText() {     document.all.MyHeading.style.color = "red";     document.all.MyText.innerText =          "DHTML gives you total control over your document!"; } //--> </SCRIPT> </HEAD> <BODY onclick="ChangeText()"> <H3 ID=MyHeading>Welcome to Dynamic HTML!</H3> <HR> <P ID=MyText>Click anywhere in this document.</P> </BODY> </HTML>

When you run this DHTML code in your Internet Explorer 4.0 browser and click anywhere within the document, you'll see the heading change to red and the text change. You can also test out the code in the Quick View tab within Microsoft Visual InterDev 6.0. The main sections of code to notice within Figure 7-2 are the <SCRIPT> section and the <H3> and <P> tags. You'll notice that both the heading and the text element have been assigned IDs. This allows the script in the ChangeText function to reference the elements by name and change their properties.