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
Post new comment