The Document Object Model, or DOM, is an object that provides access to all the elements within the HTML document or page, such as links, forms fields, anchors, and so on. There are, however, several object models that relate to the DOM as it stands today that warrant some discussion. Earlier in this chapter, we briefly discussed the evolution of the DOM by various browser vendors and touched upon the various incompatibilities that have occurred as the object models have evolved over time. This is both a good and a bad thing. On one hand, it means that the object models are constantly being reviewed and improved upon, with the ultimate goal to reach a level of standardization, or commonality, among all the major browser vendors. This is one of the major tenets of the W3C, which was also mentioned at the beginning of this chapter. On the other hand, it means that, over time, vendors have implemented browser features in different ways, which makes it hard for developers to implement functionality without ensuring that it works in browsers from various vendors, as well as different versions of browsers from the same vendor.
There are essentially three object models that form the primary pieces of the JavaScript object model set:
❑ The core JavaScript object library and language
❑ The Browser Object Model
❑ The Document Object Model
So far in the chapter, we have covered the first piece of the JavaScript object model set, and this is fairly consistent across browser vendors and the various browser versions.
The second piece represents the object model exhibited by the browser itself. This traditionally comprises a windowobject as the root object, which holds references to other objects contained within it such as the
documentobject that contains the page elements. The documentobject is the reference to the standard DOM — the third of the primary pieces of the JavaScript object model set — and is the reference by which you can manipulate page elements dynamically using JavaScript. Figure 3-3 shows this relationship.
51
Figure 3-3
The distinction between the Browser Object Model and Document Object Model has always been a little blurred, especially in previous browser versions; however, this distinction is becoming more pronounced as the standards around them have matured and been more widely adopted.
The Browser Object Model really refers to the capabilities and characteristics of the browser itself. By interacting primarily with the windowobject, you can manipulate and control various aspects of the browser. Because the windowobject is the root object of the Browser Object Model, its use is often inferred. By this, we mean the following use of the alertfunction:
alert(“We have inferred the use of the window object”);
is equivalent to using the alertfunction in this manner:
window.alert(“Directly referencing the window object”);
with the latter version explicitly listing the windowobject. In contrast, the former version made use of the alertstatement, which inferred the use of the windowobject. In other words, in that former case, the use of the window object was assumed. In the same way, you can write the following:
document.write(“Some text”); window.document.write(“Some text”);
and both statements mean exactly the same thing. Inferring the use of the windowobject is a very com- mon practice and will be used throughout the remainder of this book.
navigator location history frames[] document
window Document Object Model (DOM)
52
Chapter 3
The documentobject is the primary focus for most web application developers and is used for almost all dynamic content within a web application.
For more information and details regarding the Browser Object Model, visit the URLhttp://msdn .microsoft.com/library/default.asp?url=/library/en-us/dnproasp/html/ thebrowserobjectmodel.aspor http://academ.hvcc.edu/~kantopet/old/ javascript/index.php?page=the+js+bom&printme=true.
Since the documentobject will be the primary medium through which web application developers will operate, more time will be devoted to that subject than any other within this chapter. As with most ele- ments of browser- and web-based application development, some history is involved. To fully describe the current DOM and to understand the fact that, as a web application developer, it is important to know what limitations your target customers or audience has, requires a knowledge of the various levels of DOM compliance, features, and acceptance.
As with any web application development, the fact that you are using the latest and greatest XHTML- compliant tool, does not mean that your users will be accessing this content using the latest and greatest set of browsers. Depending upon the nature of the business or the application, you may be required to cater for older browsers such as Internet Explorer 4 or Netscape 4. This is not particularly desirable due to the extra amount of work required to cater to these scenarios, but it is important to understand the limitations involved with these browsers, that is, the level of DOM that they provide access to.