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]

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.

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.