Main Page

Advanced DOM Techniques

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
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
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
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
style is represented by
); two-word styles are represented by the first word
followed by the capitalized second word with no dashes (for example, the
style is represented as
). The following table lists some popular CSS
attributes and their JavaScript
object equivalents:
13_579088 ch10.qxd 3/28/05 11:39 AM Page 303

JavaScript EditorFree JavaScript Editor     Ajax Editor