Chapter 12. DHTML Basics

The ability to change a Web page dynamically with a scripting language is made possible by the Document Object Model (DOM), which makes any element on the page available to JavaScript. This powerful capability allows you to change not only virtually any attribute set for an element, but also any property that can be controlled with CSS (Figure 12.1).

Figure 12.1. The Rijks Museum of Amsterdam uses some cool DHTML techniques integrated with a bit of Flash to create an interactive webbed environment (rijksmuseum.nl).

Although the DOM didn't start out as a standard, the good news is that modern browsers now use the DOM standardized by the World Wide Web Consortium (W3C). You can think of a DOM as a map of your page, which locates every element, either through its HTML element name or more directly using an ID assigned to the element. Being able to address elements in this way gives you the ability to change the element or even add new elements to the page.

In this chapter, you'll learn how to use the W3C's standardized DOM, and how event handlers can be made to trigger actions with the DOM.