Java Reference
In-Depth Information
12
Dynamic HTML and the W3C
Document Object Model
JavaScript's primary role in web development is to interact with the user, to add some kind of behav-
ior to your web page. You've seen this in previous chapters, especially Chapter 7 and Chapter 8
when you were scripting forms, frames, and windows. User interaction doesn't stop there, though.
In fact, JavaScript gives you the ability to completely change all aspects of a web page after it's
loaded in the browser, a technique called
Dynamic HTML (DHTML)
. What gives JavaScript this power
over a web page is the
Document Object Model (DOM)
, a tree-like representation of the web page.
The DOM is one of the most misunderstood standards set forth by the World Wide Web
Consortium (W3C), a body of developers who recommend standards for browser makers and
web developers to follow. The DOM gives developers a way of representing everything on a
web page so that it is accessible via a common set of properties and methods in JavaScript. By
everything, I mean
everything
. You can literally change anything on the page: the graphics, tables,
forms, and even text itself by altering a relevant DOM property with JavaScript.
The DOM should not be confused with the Browser Object Model (BOM) that was introduced
in Chapter 6. You'll see the differences between the two in detail shortly. For now, though, think
of the BOM as a browser-dependent representation of every feature of the browser, from the
browser buttons, URL address line, and title bar to the browser window controls, as well as parts
of the web page, too. The DOM, however, deals only with the contents of the browser window
or web page (in other words, the HTML document). It makes the document available in such a
way that any browser can use exactly the same code to access and manipulate the content of the
document. To summarize, the BOM gives you access to the browser and some of the document,
whereas the DOM gives you access to all of the document, but
only
the document.
The great thing about the DOM is that it is browser- and platform-independent. This means that
developers can fi nally consider the possibility of writing a piece of JavaScript code that dynami-
cally updates the page, and that will work on any DOM-compliant browser without any tweak-
ing. You should not need to code for different browsers or take excessive care when coding.
The DOM achieves this independence by representing the contents of the page as a generic tree
structure. Whereas in the BOM you might expect to access something by looking up a property
