↑
Main Page

Advanced DOM Techniques

Although the basic DOM is pretty straightforward, you can manipulate a document’s underlying

DOM tree in several ways. First, you can make use of several nonstandard properties and methods

available in modern browsers, as well as little-known and underused DOM standard interfaces.

This chapter highlights the browser features that make this possible. Some of the interfaces dis-

cussed in this chapter are defined by the DOM and some are not, but they all enhance your ability

manipulate DOM documents and nodes.

Scripting Styles

When Cascading Style Sheets (CSS) were introduced 1996, they completely changed the way

developers formatted their HTML pages. Instead of using HTML tags such as

<font/>

and

<b/>

pages began using CSS to define the appearance of fonts and other items. The natural next step for

CSS support was to make styles accessible from JavaScript.

Internet Explorer 4.0 introduced a

style

object for each element on a page to manage that element’s

CSS-defined styles. The DOM eventually adopted this approach as a standard way to access an ele-

ment’s style information.

Today, the

style

object contains a property for each CSS style, albeit with some different format-

ting. All one-word CSS styles are represented by a property with the same name (for example, the

color

style is represented by

style.color

); two-word styles are represented by the first word

followed by the capitalized second word with no dashes (for example, the

background-color

style is represented as

style.backgroundColor

). The following table lists some popular CSS

attributes and their JavaScript

style

object equivalents:

13_579088 ch10.qxd 3/28/05 11:39 AM Page 303