JavaScript Object Models | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Every Web document is made up of a variety of text intermixed with tags such as <a> , <img> , and <form> . A page might be composed of three image elements, two paragraphs, an unordered list, and the text within these elements. The Document Object Model (DOM) describes each document as a collection of individual objects such as images, paragraphs, and forms, all the way down to the individual fragments of text. As a browser parses a particular HTML/XHTML document, it creates corresponding scripting objects for each tag encountered. The properties of these objects are determined by the attributes of the encountered markup. For example, the paragraph tag <p> has an align attribute that can be set to left , right , or center . In the object model, the HTMLParagraphElement object is defined to model the <p> tag and it has an align property that corresponds to the tag's align attribute. An object can have methods that are associated with it, and events that can occur and affect it. An image tag can have an onmouseover event that is triggered when a user places the cursor over the image. A form can have a submit() method that can be used to trigger the submission of the form and its contents to a server-side program.

The best way to explain the idea of an object model is by an example. Look at the simple markup example here:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Demo Company  </title>   </head>   <body bgcolor="white">   <h1 align="center">  Demo Company  </h1>   <hr />   <p id="para1">  This is a paragraph of text.  </p>   <ul>   <li><a href="about.htm">  About  </a></li>   <li><a href="products.htm">  Products  </a></li>   </ul>   </body>   </html>

This file could be modeled as a parse tree, as shown in Figure 14-3. The structured breakdown of markup elements and how they enclose one another should be familiar even from the first chapter of this book.

Figure 14-3: Parse tree for example HTML

The concept of an object model like the DOM is that there is a rigid structure defined to access the various markup elements and text items that make up a document using a scripting language. This model starts from the browser window itself. A typical window contains either a document or a collection of frames (basically windows ), which in turn contains documents. Within a document is a collection of markup elements. Some of these elements, particularly forms, contain even more elements, some might contain text, and others contain both text and markup. The key to accessing the elements in a document is to understand the hierarchy and make sure to name the various elements in the page using either the id or the name attribute, or for maximum compatibility, both.

Since Netscape 2, the browser, window, document, and document contents ”forms, images, links, and so on ”have been modeled as a collection of objects. As mentioned previously, this is generically referred to as an object model or, more precisely, a document object model (DOM). Both of the major browsers support the DOM idea, but over the years each has supported different naming conventions and a different degree of exposure. For example, under Netscape 3, only particular items ”form elements, links, and so on ”are accessible for scripting. Figure 14-4 illustrates the object model for Netscape 3 and Internet Explorer 3.

Figure 14-4: Object model for Netscape 3 and Internet Explorer 3 browsers

Objects in the Netscape 3 object hierarchy provide access not only to page elements such as links, anchors, frames, and forms, but to things such as the browser's name, history, plug-ins, and Java classes associated with the current window.

With the introduction of Netscape 4, more elements, such as the nonstandard HTML element layer , became accessible. Under Internet Explorer 4, all page elements are scriptable through the document.all collection. Figure 14-5 shows an expanded object model for this troubling browser generation, which was characterized by the idea of DHTML (Dynamic HTML). The problem with these second generation object models is that there are many differences between the two browsers, so note in Figure 14-5 the numerous items that are available under only one browser or another. While the future should eliminate such inconsistencies, these models serve to illustrate the significant differences in JavaScript between browsers.

Figure 14-5: Expanded object model for 4.x generation browsers

Because of the significant difference in the object models supported by each browser, it can be challenging to write script code that works in both browsers. Fortunately, the W3C is working on standardizing the access to page content via the standard DOM. You'll see this later, but for now let's turn our attention to how to access page objects regardless of the object model supported.

< Day Day Up >