Appendix B: JavaScript Object Reference

This appendix provides a reference for objects available in JavaScript, including their properties, methods, event handlers, and support under the popular browsers. The support site at www.javascriptref.com also has much of the information available in this appendix.

Object Models

An object model defines the interface used by scripts to examine and manipulate structured information, for example, an (X)HTML document. An object model defines the composition and characteristics of its constituent parts as well as how they may be operated upon. The “big picture” of the JavaScript object models is shown in Figure B-1.

Figure B-1: The “big picture” of JavaScript’s object model

There are four kinds of objects available in JavaScript:

User-defined objects are created by the programmer and therefore are not subject to any standards and are not discussed in this appendix. These objects are not shown in Figure B-1.
Built-in objects are provided for common tasks such as regular expression and date manipulation, as well as tasks associated with JavaScript’s data types. These objects are governed by the ECMAScript standard (ECMA-262) and are fairly consistent across browsers.
Browser objects are part of the Browser Object Model (BOM), the totality of non-built-in objects available in a particular browser. These objects provide the ability to examine and manipulate the browser itself, including the size and shape of its windows and its configuration information. These objects do not fall under any standard but often adhere to ad hoc structural norms that have evolved over the years.
Document objects represent the elements of the HTML (or XML) document that is currently loaded by the browser. Traditionally, different browsers have implemented different features and interfaces for manipulation of document objects, but recently these objects have been standardized by the W3C Document Object Model.

As you can see from Figure B-1, the Document Object Model falls under the umbrella of the objects provided by the browser. For this reason, early Document Object Models were highly browser-specific, in fact so intertwined with the BOMs that there is really little use trying to specify the two separately.

Browsers’ Object Models

This section contains a general reference and basic review of the different Browser/Document Object Models that exist in major versions of Netscape and Internet Explorer.

Note

The manner in which document objects are referred to has evolved over time. For example, the contents of the links[] collection are thought of as Link objects in traditional models while they are now more often thought of as <a> element objects created by an occurrence of an <a href - "..."> tag in the document. To complicate matters, the official DOM name for a member of the links[] collection is an HTMLAnchorElement object. The important thing to remember is that although these names may vary, they all refer to the same thing: an object that is accessible to JavaScript that corresponds to an instance of a particular HTML element in the document.

The Traditional Object Model

This is the basic object model common to all scriptable browsers. It was implemented in Netscape 2 and Internet Explorer 3 and is shown in Figure B-2. This model has only limited support for events.

Figure B-2: The traditional object model of Netscape 2 and Internet Explorer 3

Netscape 3

Netscape 3 makes more parts of the page available to scripts and includes for the first time the ability to dynamically manipulate images through its images[] collection. Also scriptable are Java applets (via the applets[] collection and LiveConnect features) and embedded objects. This browser also provides MIME type and plug-in sensing. Its object model is shown in Figure B-3.

Figure B-3: The Netscape 3 object model

Internet Explorer 3

The model of Internet Explorer 3 is essentially that of the traditional object model and is shown in Figure B-4.

Figure B-4: The Internet Explorer 3 object model

Netscape 4

Netscape 4 adds the first primitive DHTML capabilities by exposing the proprietary <layer> element to scripts. This browser also has a more robust event model where events begin at the top of the hierarchy and trickle down to the target element, affording intervening objects the opportunity to handle or redirect the event. While it might appear that dynamic manipulation of style is possible, most parts of the page will not reflect changes to their style once the page has been loaded.

This model is shown in Figure B-5.

Figure B-5: The Netscape 4 object model

Internet Explorer 4+

Internet Explorer 4 marks the point at which DHTML capabilities begin to come of age. This browser exposes all parts of the page to scripts through the all[] collection. The event model features event bubbling, where events begin their life cycle at the element at which they occur and bubble up the hierarchy, affording intervening elements the opportunity to handle or redirect the event. This model is shown in Figure B-6.

Figure B-6: The Internet Explorer 4+ object model

Although later versions of Internet Explorer add a tremendous amount of new features, the core aspects of the IE Document Object Model remain essentially the same.

Internet Explorer 5.5+, Netscape 6, and the DOM

Support for DOM properties and methods matures gradually in versions of Internet Explorer but occurs all at once in Netscape with version 6. Netscape 6 keeps the so-called DOM0 document objects, basically those found in the traditional model, and adds support for W3C DOM methods. Internet Explorer 5.5 provides decent support for parts of the DOM as well, and Internet Explorer 6 claims to be DOM-compliant, although both 5.5 and 6.0 still provide the model of IE4 for backward compatibility.

In this modern model all parts of the page are scriptable, and the document is represented as a tree. Access to elements and attributes is standardized, as are a core set of properties and methods for document objects that largely reflect their corresponding element’s HTML 4 attributes as discussed in the following sections.