- Grasp the concepts of DOM nodes and DOM trees.
- Traverse, edit, and modify elements in an XHTML document.
- Change CSS styles dynamically.
When you acquire these skills, you will be able to build robust client-side web applications.
In this chapter we introduce the Document Object Model (DOM)
DOM gives you access to all the elements on a web page. Inside the browser, the
whole web pageparagraphs, forms, tables, etc.is represented in an object
the page dynamically.
Previously, both Internet Explorer and Netscape had different versions of
Dynamic HTML, which provided similar functionality to the DOM. However, while
they provided many of the same capabilities, these two models were incompatible
with each other. In an effort to encourage cross-browser websites, the W3C
created the standardized Document Object Model. Firefox, Internet Explorer 7,
and many other major browsers implement most of the features of the W3C DOM.
This chapter begins by formally introducing the concept of DOM nodes and DOM
trees. We then discuss properties and methods of DOM nodes and cover additional
methods of the document object. We also discuss how to dynamically change style
properties, which enables you to create many types of effects, such as
user-defined background colors and animations. Then, we present a diagram of the
extensive object hierarchy, with explanations of the various objects and
properties, and we provide links to websites with further information on the