Dynamic HTML (DHTML) Articles

Note  As of December 2011, this topic has been archived and is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Windows Internet Explorer, see Internet Explorer Developer Center.

This section contains articles that describe Dynamic HTML (DHTML), a Internet Explorer feature similar to the Document Object Model (DOM) specified by the World Wide Web Consortium (W3C).

While Internet Explorer continues to support DHTML, web developers are strongly encouraged to use DOM features specified by the W3C. This will simplify long term maintenance and provide the best support for multiple browsers. For more information, see Creating Standards-Enabled Websites.

In this section


About Cross-Frame Scripting and Security

With DHTML, content in different windows and frames can interact in powerful ways by scripting with the object model. However, since a browser can simultaneously display unrelated documents in its various windows and frames, certain rules must be enforced to protect data integrity and privacy of information.

About DHTML Data Transfer

As of Microsoft Internet Explorer 5, you have access to an extensive data transfer implementation. For Internet Explorer, data transfer involves writing information to and reading it from the clipboard through a data transfer object. The information transferred includes both the data format and the data itself.

About Dynamic Content

Obsolete. Internet Explorer gives you a rich set of properties and methods to dynamically construct and alter Web pages on the fly. For example, a script can insert a list of section titles at the beginning of the document, or replace that list with a list of links to the actual sections in the document.

About Dynamic Properties

As of Windows Internet Explorer 8, dynamic properties have been deprecated and are only supported for Web pages displayed in IE5 (Quirks) mode or IE7 Standards mode. Internet Explorer 5 offers an easy-to-use new feature that enables Web authors and developers to vastly improve the appearance and rendering of their Web pages. Using the power of dynamic properties, it is now possible to declare property values not only as constants, but also as formulas. The formulas used in a dynamic property can reference property values from other elements, thereby allowing authors unique flexibility when designing their Web pages.

About Mouse Capture

Internet Explorer 5 enables Web authors to design pages that handle mouse events in the same way Classic Windows applications do.

About My Pictures Photo Support

Obsolete. My Pictures is a simple feature that allows users to more easily save, print, and e-mail images found in web pages, without having to right-click the image. The My Pictures user interface is a small set of common buttons that appear in a hovering toolbar when a user mouses over an image.

About the DHTML Object Model

The DHTML DOM allows authors direct, programmable access to the individual components of their Web documents, from individual elements to containers. This access, combined with the event model, allows the browser to react to user input, execute scripts on the fly, and display the new content without downloading additional documents from a server. The DHTML DOM puts sophisticated interactivity within easy reach of the average HTML author.

About the Pop-up Blocker

The Pop-up Blocker feature in Microsoft Internet Explorer 6 for Windows XP Service Pack 2 (SP2) protects users from malicious activity that is often hidden behind or initiated by pop-up windows. Designed to give users back control over their Web browsing experience, this feature is on by default, and it blocks script-initiated pop-up and pop-under windows that launch automatically from a Web site. By understanding how the Pop-up Blocker works, you can ensure that important information on your Web site gets noticed, and you can provide your users with a better Web-browsing experience.

About the W3C Document Object Model

This document discusses the implementation of the World Wide Web Consortium (W3C) Document Object Model (DOM) interface available in Internet Explorer 5 and later.

About Window Restrictions

In Internet Explorer, scripts can open two different types of windows and can resize and reposition existing windows. Malicious coders have used these script-opened windows and the script-driven window positioning to mislead and deceive users. The Window Restrictions security feature in Internet Explorer 6 for Windows XP SP2 now restricts the opening and placement of windows by script to prevent malicious coders from misleading users. These restrictions include constraints on new Internet Explorer windows created by the window.open method and HTML pop-up windows created by the window.createPopup method, and positioning and sizing of Internet Explorer windows. By understanding Window Restrictions and how they work, you can write your scripts so that your Web pages function as expected.

Activating ActiveX Controls

Deprecated. Users cannot directly interact with Microsoft ActiveX controls loaded by the APPLET, EMBED, or OBJECT elements. Users can interact with such controls after activating their user interfaces. This topic describes how Internet Explorer handles ActiveX controls, shows how to load ActiveX controls so their interfaces are activated, and describes the impact of this behavior on accessibility tools and applications hosting the WebBrowser Control.

Building High Performance HTML Pages

The features delivered with Microsoft Internet Explorer 4.0 and later have helped make the Web a compelling space in which to work and to play. The quantity and complexity of pages as well as the number of consumers of those pages has significantly increased the traffic on the Web. For all the merit that the Web brings to application developers, it introduces a host of problems.

Building Tables Dynamically

This article discusses the structure of HTML tables and explains how to use the DOM to create them. It also compares the benefits of using table-specific methods instead of the more generic DOM methods. The article assumes you are familiar with JavaScript.

Changing Element Styles

This document shows you how to change the SRC attribute on an iframe element so that the contents of iframe change on the fly. The same example also shows you how to change the background color of the body for the SRC= document of the iframe. The next set of examples shows how to change the class name of the element so that it is associated with a different style sheet.

Cross-Platform Functionality

Obsolete. With Internet Explorer 4.0, content authors can easily create pages that run on all platforms—the 32-bit Windows platforms, Windows 3.1, Macintosh, and UNIX. In particular, core DHTML and Microsoft Active Channel functionality are cross-platform.

Detecting Internet Explorer More Effectively

This topic demonstrates how to detect current and future versions of Internet Explorer more effectively.

DHTML Collections

This section contains a list of the collections exposed by the DHTML Object Model.

Enhancing Table Presentation

Internet Explorer 5 gives the author more control over table presentation. Significantly faster rendering is now possible. Using this layout, authors can increase table rendering speeds by several orders of magnitude, particularly for longer, more complex tables.

Faster DHTML in 12 Steps

This article describes how using some DHTML features can affect performance more than others, and it presents tips that will help your pages perform faster.

Finding Text in the Document

You can search for a given string of text in a document by using the findText method on a TextRange object. This method starts the search at the beginning of the range and, if it finds the string, positions the range so that it entirely encloses the string.

How to Add a Shortcut Icon to a Web Page

You can use shortcut icons to display your logo or some other small graphic on the Internet Explorer Favorites menu, address bar, and—starting with Windows Internet Explorer 7—page tabs. They have no special Web server requirements and are a great way to add brand recognition to your Web site.

Introduction to Dynamic HTML

DHTML is a set of innovative features originally introduced in Internet Explorer 4.0. By enabling authors to dynamically change the rendering and content of a Web page as the user interacts with it, DHTML enables authors to create visually compelling Web sites without the overhead of server-side programs or complicated sets of controls to achieve special effects.

Introduction to Dynamic Styles

You can dynamically change the style of any HTML element in a document. You can change colors, fonts, spacing, indentation, position, and even the visibility of text. Because the DHTML DOM makes every HTML element and attribute accessible, it is easy to use scripts to dynamically read and change styles.

Introduction to Filters and Transitions

With Internet Explorer 4.0 and above, you can apply various multimedia-style visual effects to your Web page. You can implement these effects in Web pages using Cascading Style Sheets (CSS) properties. By combining filters and transitions with basic scripting, you have a powerful tool for creating visually engaging and interactive documents. Microsoft Internet Explorer 5.5 and above supports the richest variety of optimized filters. Most examples in this article require that you have Internet Explorer 5.5 installed.

Introduction to Forms

Forms provide an interface for collecting, displaying, and delivering information, and are a key component of HTML. By providing different controls such as text fields, buttons, and checkboxes, forms can enhance Web pages with a means to exchange information between a client and a server.

Introduction to Persistence

Persistence enables authors to specify an object to persist on the client during the current and later sessions using Dynamic HTML (DHTML) behaviors. Persistence allows Internet Explorer 5 and later to retain Web page information, styles, variables, and state.

Language Codes

The following table lists all the possible language codes used to specify various system settings.

Managing Style Sheets

Dynamically changing CSS styles that are applied to documents is not limited to the inline styles (styles defined on HTML elements with the STYLE attribute). Global style sheets defined with a LINK or STYLE tag in the HEAD section of the document can be manipulated through script. Manipulating the global style sheet is a powerful way to dynamically change the styles that apply to Web pages.

Performance Considerations in Internet Explorer

This page provides links and tips for getting extra performance from DHTML, Script, Web Servers, ActiveX Controls, Java Applets, and Plugins.

Security Considerations: Dynamic HTML

This document provides information about security considerations related to DHTML.

Tips and Tricks

As with any type of programming, writing bug-free, efficient scripts that meet your expectations takes a bit of work. The following sections provide some tips and hints to make that work take less time and go more smoothly.

Understanding the Event Model

An event is a notification that occurs in response to an action, such as a change in state, or as a result of the user clicking the mouse or pressing a key while viewing the document. An event handler is code, typically a function or routine written in a scripting language, that receives control when the corresponding event occurs.

Using AutoComplete in HTML Forms

Internet Explorer 5 and later includes an integrated feature called AutoComplete, which helps users quickly enter information into form fields. The AutoComplete innovation in HTML forms safely stores information entered into INPUT_text and INPUT_password fields.

Using IFRAME Elements

In Internet Explorer 5.5 and later, frames are windowless, resulting in greatly improved performance. In addition, Internet Explorer 5.5 and later can now overlap IFRAME elements—also known as inline floating frames—and can make the content inside inline floating frames transparent.

Using the Popup Object

The popup object enables you to create window objects that take full advantage of DHTML.

Using the TextRange Object

Most users will only want to use the innerText/innerHTML and outerText/outerHTML properties and methods discussed previously. However, there is some more advanced text manipulation that can be done using a "text range" object.

Working with Windows, Frames, and Dialog Boxes

Internet Explorer creates a window object whenever it opens an HTML document. Because this object is the highest-level object in the object model, you use it to gain access to properties and subobjects in the object model that you need to dynamically access the document content. This article explains how to use the window object, create new window objects, and create special types of window objects.