JavaScript: The Definitive Guide

Previous Chapter 11
Windows and the JavaScript Name Space
Next
 

11.8 The JavaScript Object Hierarchy

We've seen that the Window object is the central object of client-side JavaScript. All other client-side objects that radiate out from this center. As we've seen, JavaScript variables are nothing more than properties of the current Window object, and every JavaScript expression is implicitly evaluated in the context of that current window object. Therefore, any other objects in JavaScript can only be referred to through the Window object. For example, every Window object contains a document property that refers to the Document object associated with the window. Window objects also contain a frames[] array that refers to the Window objects that represent the frames of the original window. So, for example, document represents the Document object of the current window, and frames[1].document refers to the Document object of the second child frame of the current window.

Objects referred to through the current window or through some other Window object may themselves refer to other objects. For example, every Document object has a forms[] array that contains Form objects representing any HTML forms that appear in the document. To refer to one of these forms, you might write:

self.document.forms[0]
To continue with the same example, each Form object contains a elements[] array that contains objects that represent the various HTML form elements (input fields, buttons, etc.) that appear within the form. In extreme cases, you can write code that refers from one object to another and another and end up with expressions as complex as this one:

parent.frames[0].document.forms[0].elements[3].options[2].text

Because all client-side objects in JavaScript exist as properties of other objects, and because all expressions include an implicit reference to the current Window object, a hierarchy of JavaScript objects exists and that this hierarchy has the current window as its root. Figure 11.2 shows this hierarchy. Study this figure carefully; understanding the HTML object hierarchy and the objects it contains is crucial to successful client-side JavaScript programming.

Figure 11.2: The JavaScript object hierarchy

[Graphic: Figure 11-2]

Note that Figure 11.2 shows only object properties that refer to other objects. Most of the objects shown in the diagram have quite a few more properties than those shown. The notation "3.0" in the figure indicates properties that do not exist in Navigator 2.0. The chapters that follow document each of the objects shown in the object hierarchy diagram and demonstrate common JavaScript programming techniques that make use those objects. You may want to refer back to Figure 11.2 while reading these chapters.


Previous Home Next
Garbage Collection Book Index Programming with Windows

HTML: The Definitive Guide CGI Programming JavaScript: The Definitive Guide Programming Perl WebMaster in a Nutshell