Underlying Principles of the Dynamic HTML Object Model

The Dynamic HTML Object Model was created with several goals in mind:

• To define a hierarchical structure representing all parts of a Web document
• To allow the modification of that structure through the addition and removal of content
• To provide a way of monitoring and manipulating the characteristics of content on the page
• To provide information about how the items on a page interact with the user and each other

The Internet Explorer Dynamic HTML Object Model allows a developer to programmatically control everything on the page and to change virtually anything at any time. It allows reporting of keyboard and mouse events and even lets a developer dynamically change the HTML that makes up the page. Any such changes are immediately visible to the user. Incorporation of the Dynamic HTML Object Model was one of the most sweeping changes to Internet Explorer version 4.

Because the Dynamic HTML Object Model allows an unprecedented amount of control over the page, it encourages the developer to include far more interactivity between a user and a Web page than was previously possible. Here are a few examples of effects that can be easily created using the Dynamic HTML Object Model with script:

• An index expands or collapses when the user clicks an entry.
• When the user passes the mouse pointer over an image of a button in a default state, the image can be exchanged for that of a button in a selected state, making the button appear to pop up.
• The user can drag text or images around on a page.
• Items can move around on a page without user interaction and end up positioned exactly where the designer wants them.
• Text appears when the user positions the mouse pointer over an image.
• The formatting of text, graphics, and tables can be changed on the fly.
• Parts of the page are dynamically created or destroyed based on user input.