Welcome!

Kurt Cagle

Subscribe to Kurt Cagle: eMailAlertsEmail Alerts
Get Kurt Cagle via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: RIA Developer's Journal, AJAX World RIA Conference

RIA & Ajax: Article

Real-World AJAX Book Preview: Reviewing the HTML Document Object Model

Real-World AJAX Book Preview: Reviewing the HTML Document Object Model

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

Reviewing the HTML Document Object Model
Up to this point, the discussion has focused on JavaScript exclusively. However, it's reasonable to assume that if you're involved in AJAX development, you'll almost certainly be working in the context of an HTML or XHTML page.

HTML has been around for more than a decade, and I'm assuming here if that you're reading a book on AJAX development it's almost certain you know the various and sundry tags that HTML features. While it doesn't hurt to review them, your best bet here is to acquire a good reference book on HTML.

One of the key features of working with HTML from a JavaScript standpoint is the ability to represent the HTML in a document, not as a text description (the HTML or XML source file) but as a set of contained objects, each of which corresponds to the XML or HTML nodes in a one-to-one relationship. This particular design is called the Document Object Model, and it's one of the most powerful and overlooked evolutions in programming since the advent of C++.

If you can create such a document object model as something that can be represented as an XML structure, then by manipulating the XML model, you can also represent the underlying data structure and by extension the appearance of the model in the browser. The impact is profound.

The HTML document object model emerged in 1994-95, representing the various objects created by an HTML page. The World Wide Web Consortium (W3C), in turn, formalized the DOM model in 1996-97. And as XML came online it extended it to handle the XML document object model as well.

The core of the document object model is, not surprisingly, the document object. In most browsers, this object is already instantiated once an HTML document has been loaded in and shares the W3C DOM document interface. The document object can be thought of as the page that holds the HTML/XML tree, as well as the mechanism by which new elements, attributes, and related content can be created.

The document object is (not surprisingly) one of the most complex objects in a typical Web page, in part because it actually exposes interfaces for two distinct objects that are defined in the W3C DOM specification - DOMDocument and DOMNode, typically - along with specialized interfaces that are supplied for each separate browser (this split behavior tends to be the case for most objects defined in HTML or XML pages).

The DOMNode portion is common to nearly all objects in the DOM tree, defining such behaviors as child, sibling, and parent relationships and value and type information. Table 2.5 summarizes the methods and properties that are exposed by DOMNode objects:

The DOMElement also contains a number of properties that are unique to it as part of the HTML document, independent of its nodal properties. These are listed in Table 2.6.

The DOMDocument interface shares all of the properties of the DOMNode element, but also has a number of methods and properties that are unique to the document itself. These methods and properties are discussed in Table 2.7.

The window object, though technically not a DOM object, has been so widely adopted in browsers that there's currently an effort underway at W3C to add it formally to the DOM specification as a distinct object. The window is the container from the document and as such acts as the interface between the DOM on one hand and the browser on the other. A listing of the primary properties for the window object is given in Table 2.8.

The final object of special interest to JavaScript developers is the style property, since it provides one of the more dynamic means of changing the Cascading Style Sheets (CSS) layer. By working with the style object you can change the color, borders, backgrounds, and other aspects of the way that a particular element gets rendered to the screen. The style property exists on all displayable elements in HTML, and is usually rendered as myElement.style.cssProperty. The last of such style properties (and their corresponding CSS properties) is given in Table 2.9.

The Mozilla properties, for the most part, either represent experimental implementations of the CSS 3.0 specification or represent CSS properties that are unique to the Mozilla XUL framework. They're included here primarily because other browsers, such as Opera, either have adopted or are adopting the same properties without the -moz- extension.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.

More Stories By Kurt Cagle

Kurt Cagle is a developer and author, with nearly 20 books to his name and several dozen articles. He writes about Web technologies, open source, Java, and .NET programming issues. He has also worked with Microsoft and others to develop white papers on these technologies. He is the owner of Cagle Communications and a co-author of Real-World AJAX: Secrets of the Masters (SYS-CON books, 2006).

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.