Dynamic HTML: The Definitive Reference

Two Types of Containment

If you have worked with JavaScript and the scriptable document object models inside Navigator and Internet Explorer, you are aware that scriptable document objects have a containment hierarchy of their own—an object containment hierarchy. The window object, which represents the content area of a browser window or frame, is at the top of the hierarchy. The window object contains objects such as the history, location, and document objects. The document object contains objects such as images and forms, and, among the most deeply nested objects, the form object contains form elements, such as text fields and radio buttons.

Document object containment is important in JavaScript because the hierarchy defines how you refer to objects and their methods and properties in your scripts. References usually start with the outermost element and work their way inward, using the JavaScript dot syntax to delimit each object. For example, here’s how to reference the content of a text field (the value property) named zipCode inside a form named userInfo:

window.document.userInfo.zipCode.value

Unlike most object-oriented worlds (such as Java), the object-based world of scriptable browsers does not strictly adhere to the notion of parents and children. In fact, except for the relationship between a frameset document and the frames it creates, the word “parent” is not part of the object containment vocabulary. Document objects do not inherit properties or methods of objects ...