This article may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist. To maintain the flow of the article, we've left these URLs in the text, but disabled the links.

MIND



Working Knowledge
mindwork@microsoft.com
Aaron Skonnard

The Internet Explorer Object Model and DHTML

I
t seems like every day Microsoft comes up with a new technology TLA: ADO, ASP, COM, DAO, DCOM, DHTML, DNA, MDAC, MSMQ, ODBC, OLE DB, RDO, MMBOP, RDS, UDA, and XML, to name a few. So how many of these acronyms are you familiar with? If you're on top of ten or more, you're doing great! If not, keep reading MIND and you'll get there soon.
      This month I'm going to cover one of the hottest acronyms—DHTML. You've all heard of HTML but not all of you are familiar with Microsoft's new and improved Dynamic HTML. What makes DHTML dynamic?
      DHTML gives you the ability to modify the HTML of a loaded page on the fly. This flexibility allows you to add visual and functional effects that were impossible with standard HTML. Here are some examples of what you can do with DHTML:

      The cool thing about DHTML is that you can accomplish all of these features on a loaded page, without requiring more network traffic. Other Web paradigms like ASP and CGI are considered dynamic because they run on the server and generate HTML content, which is then downloaded to your browser and rendered locally. DHTML, on the other hand, takes advantage of the local CPU and renders updates automatically on the loaded page. Hence, you can respond to user input like mouse clicks or mouseover events and instantly change the look of a Web page by modifying the underlying HTML.
      To understand how this works, you need to familiarize yourself with the Microsoft® Internet Explorer 4.01 object model (see Figure 1). As you can see, Microsoft has exposed seemingly every facet of Internet Explorer functionality through automation. This new Internet Explorer 4.01 object model allows developers to harness the power of Internet Explorer 4.01 as an in-process control (WebBrowser) or as an out-of-process automation server with its own window (IWebBrowser2). The WebBrowser control allows developers to create customized browsers or other Web-centric applications while IWebBrowser lets developers use the Internet Explorer 4.01 browser application and control its behavior. (For more information on how to begin using the WebBrowser control in either Visual C++® or Visual Basic®, be sure to check out my article Boning up on the Internet Client SDK, Part I: Web Browsing Objects in the October 1997 issue of MIND.)
      Both the WebBrowser control and the IWebBrowser2 interface contain handfuls of properties, methods, and events. However, as Figure 1 shows, the WebBrowser Document property also opens the doors to the Microsoft HTML object library (also known as the DHTML object model), which is truly the foundation of DHTML.
      The DHTML object model gives you access to several HTML object collections that make up a typical Web page. These collections are only the tip of the iceberg. If you point your Web browser to http://msdn.microsoft.com/psdk/inetsdk/help/dhtml/
references/domrefs.htm, you'll see what I'm talking about. Countless objects, properties, methods, and events are available to you in the DHTML object model. As you modify properties, call methods, and respond to events, the visual representation of the page will refresh automatically.
      So how do you use the object model to achieve "dynamic" HTML? Let's look at some examples. First, suppose you want to modify a few HTML tags when the user clicks the mouse anywhere on the page. The DHTML code in Figure 2 would do the trick. If you load this code into Internet Explorer and click on the page, you'll see the heading get bigger and turn red. Plus, the words "Click anywhere" will change to "It's Magic!" Each time you click on the page another line of "It's Magic!" will appear. Example Online!
      This sample accesses both the HeadingTag and TextTag through the Document object's all collection. The all collection includes one element object for each valid HTML tag. You can access any tag found in an HTML page through the all collection. The following JScript® displays every tag name found in the given document:
 for(i=0; i<document.all.length; i++) {
     alert(document.all(i).tagName);
 }
      If you're only interested in a certain type of HTML tag, you can use one of the more specific object collections. For example, the images collection contains only the valid IMG elements found in the document, the scripts collection contains only SCRIPT elements, and so on.
      The window object is actually the root of the object hierarchy. All other objects are either properties (also known as subobjects) of the window object or properties of properties, and so on. So why were you able to directly access the Document object in the preceding examples without going through the window object? Since the current window is implied, a call to document.all is equivalent to window.-document.all.
      You can access features of the parent window through the window object. For example, if you want to display something in the Internet Explorer status bar, you could do something like this:
  window.status = "hello"
      You can also launch a new instance of Internet Explorer and have it navigate to a different Web page using the window object:
  window.open("sample.htm",null,"
	height=200,width=400,status=yes,toolbar=no,
	menubar=no,location=no,fullscreen=0");
Notice that you can specify the width, height, and several other preference settings such as whether the status bar, toolbar, menu bar, or location bar are visible by default. You can also specify if you want the new window to open in full screen mode. As you can see, the DHTML object model gives you a great deal of control over certain aspects of Internet Explorer 4.01 application behavior.
      You can do some other pretty cool things through the window object like prompt the user for input (window.prompt) and show a modal HTML-based dialog (window.show-ModalDialog). These handy methods can make your Web application more interactive and user friendly.
      There are two ways to programmatically navigate from within one page to another. First, the location object gives you access to the functionality of the Internet Explorer location bar, also known as the address field. Using the following line within a script causes Internet Explorer to navigate to the specified site:
  location="http://www.microsoft.com/mind/";
This is equivalent to using the window.navigate method, which looks like this:
  window.navigate("http://www.microsoft.com/mind/");
      I've only scratched the surface of DHTML and its object model. DHTML plays a key role in Microsoft's Windows Distributed interNet Applications (Windows DNA) architecture. Many new applications have already started using the Internet Explorer Model and DHTML. Both AOL and MSN™ have developed their own customized Web browser applications through the automation interfaces described previously. Money 98 is also an excellent example of a completely Windows-based DHTML application. For more information on DHTML, be sure to check out David Stutz's article "Accessing the Dynamic HTML Object Model from within Visual Basic 5.0" at http://msdn.microsoft.com/news/devnews/marapr98/vbdhtmlobj.htm.
      To fully appreciate this technology, you should dive into the DHTML object model reference material and start tinkering with the various collections, objects, properties, methods, and events. But at least for now, you have one fewer Microsoft acronym to worry about!

From the October 1998 issue of Microsoft Interactive Developer.