Object Hierarchy and Scoping

There are ten objects to consider in the HTML object model:

These objects are organized in the following hierarchy (the dotted line following an object indicates that multiple objects may exist):

Each of these objects has its own rules for scoping and containment.

The Window Object

The top level object is a window. Every window contains:

Frame - Array of contained frame windows. Each frame is a window that has its own properties, including a document.
History - History object for the current window. This object is used to access the history list from the browser.
Navigator - Navigator object for the current window. The navigator object contains information about the browser application.
Location - Location object for the current window. Provides information about the location of the window's URL.
Script - Scripting function defined using the SCRIPT element in the window scope.
Document - Document in the current window.

The window object properties can be referenced directly by scripts while in the window scope. So, for example, script authors do not need to type:


window.name

to reference the window name; instead, it is sufficient just to type:


name

Note also that it is possible to call scripts from one window object to another. So, to execute the script myscript in the topmost window, use:


top.myscript( )

The Document Object

The document object inherits from the Window object. These object inherit from the document object:

Link - Array of hyperlinks found on the given document.
Anchor - Array of anchors found on the given document.
Form - Array of forms found on the given document.

Because scripts attach to the window object, not the document object, the script author must type document.property to access document properties. For example, to get the title of the document:


<SCRIPT LANGUAGE="VBScript">
'...
string1 = document.title     -put the document title into string1
'...
</SCRIPT>

To access the forms in a document, the author can either refer by name or through the form array. For example, the following form can be addressed by name, by index or by index name and array reference:

In this example, the form is addressed by name:


<FORM NAME="Form1">
     <INPUT TYPE="button" NAME="Button1" VALUE="Press" onClick="pressed">
</FORM>

The author can access the object named button1 by name:


<SCRIPT LANGUAGE="VBScript">
<!--
sub pressed
   document.Form1.Button1.value="Pressed"  '   access the form by name
end sub
-->
</SCRIPT>

In this example, the form is accessed by index by index:


<SCRIPT LANGUAGE="VBScript">
<!--
sub pressed
     document.forms(0).Button1.value="Pressed"   '   access the form by index
end sub 
-->
</SCRIPT>

Scripts can refer to contained elements that are not form types directly, without using document. For example, the object "myObject" is referenced directly in script:


<OBJECT NAME="myObject" ... >
</OBJECT>

<SCRIPT LANGUAGE="VBScript">
<!--
sub foo
     myObject.color = "green"     - access the form by index
end sub 
-->
</SCRIPT>

The Form Object

The form object contains:

Element - Array of objects and intrinsic controls contained in the form.

A script can reside either in a form or in a window. If a script lives outside the form, it needs to access the elements in the form, either by name or through the form array (see the example in "The Document Object"). If, however, the script element is inside the form, it can access the elements in the form directly.


<FORM NAME="Form1">
     <INPUT TYPE="button" NAME="Button1" VALUE="Press me">
     <SCRIPT FOR="Button1" EVENT="onClick" LANGUAGE="VBScript">
	  alert "I've been pressed"
	  document.Form1.Button1.value="Click"    
	  Button1.value="Click"     
     </SCRIPT>
</FORM>
     
<SCRIPT LANGUAGE="VBScript">
sub foo
     document.Form1.Button1.value="Click"
end sub
</SCRIPT>

In vbscript, you must use this form of the syntax to perform validation: <SCRIPT anguage=vbscript> function form1_onsubmit() 'do validation here 'if the validation fails, then return false form1_onsubmit = false end function </SCRIPT> <FORM NAME=form1> <INPUT TYPE=text VALUE="some value"> <INPUT TYPE=submit> </FORM>