Chapter 9: JavaScript Object Models

An object model defines the interface to the various aspects of the browser and the document that can be manipulated by JavaScript. In JavaScript, there are a variety of object models based upon browser type and version, but in general we see two primary object models employed—a Browser Object Model (BOM) and a Document Object Model (DOM). The Browser Object Model provides access to the various characteristics of a browser such as the browser window itself, the screen characteristics, the browser history, and so on. The DOM, on the other hand, provides access to the contents of the browser window, namely, the document including the various (X)HTML elements, CSS properties, and any text items.

While it would seem clear, the unfortunate reality is that the division between the DOM and the Browser Object Model is at times somewhat fuzzy and the exact document manipulation capabilities of a particular browser’s implementation of JavaScript vary significantly. This section starts our exploration of the use of the various aspects of JavaScript object models that are fundamental to the proper use of the language. We begin this chapter with an exploration of JavaScript’s initial object model and then examine the various additions made to it by browser vendors. This apparent history lesson will uncover the significant problems with the “DHTML focused” object models introduced by the browser vendors and still used by many of today’s JavaScript programmers and will motivate the rise of the standard DOM model promoted by the W3C, which is covered in the following chapter.

Object Model Overview

An object model is an interface describing the logical structure of an object and the standard ways in which it can be manipulated. Figure 9-1 presents the “big picture” of all various aspects of JavaScript including its object models. We see four primary pieces:

Figure 9-1: JavaScript: The “big picture”

The core JavaScript language (e.g., data types, operators, and statements)
The core objects primarily related to data types (e.g., Date, String, and Math)
The browser objects (e.g., Window, Navigator, and Location)
The document objects (e.g., Document, Form, and Image)

Up until this point we have focused on primarily the first and second aspects of JavaScript. This part of the language is actual fairly consistent between browser types and versions, and corresponds to the features defined by the ECMAScript specification (http://www.ecma-international.org/publications/standards/Ecma-262.htm). However, the actual objects with which we can manipulate the browser and document do vary. In fact, in Figure 9-1 you’ll notice that it appears that the Browser Object Model (BOM) and Document Object Model (DOM) are somewhat intermixed. In previous versions of the browser there really wasn’t much of a distinction between the Browser Object Model and the Document Object Model—it was just one big mess.

By studying the history of JavaScript, we can bring some order to the chaos of competing object models. There have been four distinct object models used in JavaScript, including

Traditional JavaScript object model (Netscape 2 and Internet Explorer 3)
Extended JavaScript object model (Netscape 3)—basis of DOM Level 0
Dynamic HTML flavored object models
1. Internet Explorer 4.x and up
2. Netscape 4.x only
Extended Browser Object Model + Standard DOM (modern browsers)

We’ll look at each of these object models in turn and explain what features, as well as problems, each introduced. Fortunately, standards have emerged that have helped to straighten this mess out, but it will take some time before JavaScript programmers can safely let go of all browser-specific knowledge they have. Before we get into all that, let’s go back to a much simpler time and study the first object model used by JavaScript, which is safe to use in any JavaScript-aware browser.