Dynamic HTML, or DHTML, is all about making static HTML pages dynamic and interactive.

DHTML offers Web authors a simple yet powerful means for creating visually compelling interactive documents, that greatly enhance the Web user’s experience on the client side.

While hypertext and HTML are in effect the accepted norm for World Wide Web pages, the static nature of purely HTML documents appreciably constrains an author’s creative choices, thus limiting what the user can experience as well.

In addition, earlier browser versions included proprietary extensions outside of the norm, that made it complicated to author interactive Web pages that will be compatible across all platforms. A Web page that may work well in one browser may not do so in another.

In October 1998, to address the inherent limitations of HTML, and resolve browser incompatibility concerns, the World Wide Web Consortium ( W3C ) issued the initial specifications standard for the Document Object Model.

The Document Object Model, or DOM, is a platform-independent and language-neutral API ( Application Programming Interface ) that, in simpler terms, allows Web authors to dynamically access and manipulate the content, structure, and style of an HTML document.

Platform-independent means the DOM is not designed for any vendor-specific browser, but intended for any browser that conforms to the norm. Language-neutral means the DOM is not designed to work only with a specific programming language, but can be accessed using any language that supports it.

The DOM allows us to see ( and do some things with ) the structure beneath the HTML document, at any point in a Web page’s cycle; i.e. just before, during, and even after the page has loaded in the user’s browser.

To illustrate, let’s see how we can use the DOM to examine the HTML element heirarchy for this Web page.

 Show me 

The following sections assume you have a good working knowledge of HTML, CSS, and basic scripting. If not, I suggest you refer back to the relevant sections.