One neat thing about objects is that the properties of an object can be objects too. For example, windows have a property called document that refers to the actual HTML document in the window. This document property is itself an object that has properties and methods of its own. We saw an example of this when we talked about image swapping. Harkening back to the last lesson, we learned that you can do an image swap like this:

<a href="#" onMouseOver=
"window.document.the_image.src='button_d.gif';">
change</a>

That long string, window.document.the_image.src='button_d.gif', translates into: "Find the document property of the window, find the_image property of the document, find the src property of the_image, and set it to button_d.gif." Quite a mouthful, eh? It all works because windows are objects, documents inside windows are objects, and images inside the documents are objects too.

It may seem like a lot of detail to keep track of, but actually it's not too bad. The JavaScript Document Object Model describes a small hierarchy of objects. Here it is:

The top box of the diagram represents your browser window. Following the line from that box down, you'll see it connects to seven more boxes. These are the properties of the browser window. The sixth box there, "document," represents the contents of your window. If you follow the little line leading out of the document box, you'll see it connects to six more boxes. These are the properties of the document object. Notice that the fourth box is "images." This is the list of all the images in your Web page. Because the images are properties of the "document," which is a property of the "window," the precise way to describe an image to JavaScript is to tell it to look at the "window," find the window's "document," and in the document, look for the "image."

We're going to be visiting the various properties of the document object in lesson 5. However, before you can extract the full potential of that object, you should know how to mess with the DOM in other windows.