The hierarchy of JavaScript Objects

Objects, Properties, & Methods

When you load a document in a Browser, it creates a number of JavaScript Objects with Property values based on the HTML in the document and other pertinent information. These Objects exist in a Hierarchy that reflects the structure of the HTML page itself. The ability to change a Web page dynamically with a scripting language is made possible by the Document Object Model (DOM) which can connect any element on the screen to a JavaScript function. The DOM is the road map through which you can locate any element in your HTML document and use a script, such as JavaScript, to change the element’s properties.

So think of each Web page as a collection of several individual elements, which are called Objects. For example, every Image on the page is an Object, every Link on the page is an Object. Even this Document itself is an Object. At its most basic level, JavaScript allows you to control the appearance of many of the Objects that make up a Web page as we previously saw.

Objects are storage containers that have Properties (data values associated with Objects) and Methods (functions associated with Objects) that operate on that data. Objects may also have certain Events that are associated with them. Events are special signals or messages which occur when certain pre-defined actions take place within a Web browser, or when the user interacts with a Web page. When an event message has been triggered, you need a way to intercept the message and react to it. This is achieved through the use of Event Handlers.

The Document Object Model Hierarchy is illustrated in the following figure:

Listed below are the four things you need to know in order to understand how Objects are named. It's difficult to teach one without teaching the other three at the same time, so here they are all together. Although they may not seem perfectly clear to you when you read them through the first time, the example presented after them will show how the rules are used together, and that will clear things up a bit.

Object names include the names of Objects that contain them
The name of each Object is prefaced by the names of all the Objects that contain it, in order, separated by dots. For example, the window Object contains the document Object, and the document Object contains a form Object, and the form Object contains text input fields, buttons, select Objects, etc... — window.document.forms[0].elements[3]

Leave off the word "window."
All Object names officially start with the highest Object name, "window". But since all names start with "window", JavaScript allows you to leave that off. (document.forms[0].elements[3])

Multiple Objects are organized by Arrays
Any type of Object, such as a Form, an Image, or Links may have multiple instances on a page is referenced by an Array. Array names are formed by the plural of the Object name (i.e. "the forms Array" or "the images Array" or "links Array") and indexed by number using square brackets [ ]. In an Array, counting — begins at zero — and the items in the array are sequenced in the same order they are in the HTML code that created them.

Form elements
The numerous Object types included in the Forms Array are collectively referred to as "elements" and they can all be referred to by means of the "Elements Array" (e.g.: elements[1]).

As an example, these rules tell us that if we wanted to refer to the 2^nd text input on the 1^st form of a Web page, we would write:

document.forms[0].elements[1]

The name of this particular Object demonstrates all four rules listed above:

1) It includes the names of all the Objects that contain it,
2) the word "window" has been left off,
3) the form and element Objects are shown as indexed arrays (which start at 0), and
4) the text input Object is referred to as a part of the elements array.

How to refer to an Object's Properties and Methods

As we saw above to refer to an Object's Properties and Methods, add a dot to the end of the Object's name and put the name of the Property or Method after it. So then, suppose we want to refer to the value Property of the form element described above, we'd write:

document.forms[0].elements[1].value

Once you know how to refer to a Property of an Object, you can gain information about that Property or you can change the Property. Likewise, if you can name an Object's Methods, then you can activate them by referring to them in your script.

For example, if you wanted to use the write() Method of the Document Object, which lets you write content to a Web page (more on this in a later lesson), it would look like this:

document.write("This is what gets written into the document.")

In this hierarchy, an Object's "descendants" are properties of the object. For example, a form named form1 is an Object as well as a Property of the document Object, and is referred to as document.form1. For a list of all Objects and their Properties, Methods, and Event Handlers, see Appendix E, "JavaScript Object Summary."

Every page has the following objects:

navigator: has properties for the name and version of the Navigator being used, for the MIME types supported by the client, and for the plug-ins installed on the client.
window: the top-level object; has properties that apply to the entire window. There is also a window object for each "child window" in a frames document.
document: contains properties based on the content of the document, such as title, background color, links, and forms.
location: has properties based on the current URL.
history: contains properties representing URLs the client has previously requested.

Depending on its content, the document may contain other objects. For instance, each form (defined by a <FORM> tag) in the document will have a corresponding FORM Object.

So any element on the screen, at least any that are enclosed within HTML tags, can be identified using a NAME to give it its own unique "address" as if it were on a city map. The DOM works like a map of your web page describing a path starting with the window itself and then the HTML document down to the various elements on the Web page. For example, the following refers to the value property of a text field named text1 in a form named myform in the current document

window.document.myform.text1.value

NOTE: If an object is on a form, you must include the form name when referring to that object, even if the object does not need to be on a form. For example, images do not need to be on a form. The following code refers to an image that is on a form:

document.imageForm.aircraft.src = 'F15.gif'

The following code refers to an image that is not on a Form:

document.aircraft.src = 'F15.gif'

As we previously saw that by controlling Objects, we can:

Open new browser windows, and determine their size and whether they should have scroll bars, or location windows.
Change the content of multiple frames at once, even rewriting the HTML in a frame without downloading a new file.
Add or remove text from forms including text areas and select boxes.
Control the background color of your Web pages using JavaScript.
etc...

It's possible to do all of the things described above because all of these things (Windows, Frames, Forms, Links, etc...) are Objects and JavaScript is a tool for controlling Objects.

Objects are one of the basic building blocks of JavaScript. JavaScript contains a number of pre-defined objects, such as window and document. In addition you can create your own objects.

When you load a page in a Browser, it creates a number of objects corresponding to the page, its contents, and other pertinent information.

Every page always has the following Objects

OBJECT	DESCRIPTION
WINDOW	the top-level object; contains properties that apply to the entire window. There is also a window object for each for "child window" in a frames document.
dialog boxes	demonstrates methods: alert(), confirm() and prompt()
opener	demonstrates opener property
open() & close()	opening and closing new windows
focus(), blur()	bringing new window to the front and back.
DOCUMENT	contains properties for content in the current document, such as title, background color, and forms
fgColor, bgColor	changes properties of foreground and background color based on user input
HISTORY	contains properties representing URLs the user has previously visited
example 1
LOCATION	contains properties on the current URL
example 1
example 2

The properties of the document Object are largely content-dependent. That is, they are created based on the content that you put in the document. For example, the document Object has a Property for each Form and each Anchor in the Document.

For example, suppose you create a page named simple.htm that contains the following HTML:

<HTML>
<HEAD><TITLE>A Simple Document</TITLE></HEAD>

<FORM NAME="myform" METHOD="POST" ACTION="/cgi-bin/mail.cgi">
     Enter a value:
     <INPUT TYPE="text" NAME="text1" VALUE="blahblah">
     Check if you want:
     <INPUT TYPE="checkbox" NAME="Check1" VALUE="ON" CHECKED
     onClick="update(this.form)">Option #1
     <INPUT TYPE="button" NAME="Button1" VALUE="Press Me"
       onClick="update(this.form)">
</FORM>

</BODY>
</HTML>

As always, there would be window, location, history, and document objects. These would have properties such as:

location.href is "http://sislands.com/samples/simple.htm"
document.title is "A Simple Document"
document.fgColor is "#000000"
document.bgColor is "#FFFFFF"
history.length is "3"

These are just some example values. In practice, these values would be based on the document's actual location, its title, foreground and background colors, and so on.

Notice that the value of document.title reflects the value specified in the <TITLE> tag. The value for document.bgColor (the background color) was set in the HTML while the document.fgColor (the color of text) was not set in the HTML, so this value is based on the default values specified in the Preferences dialog box (when the user chooses General Preferences from the Options menu).

Because there is a Form in the document, there is also a form Object called myform (based on the Form's NAME attribute) that has 3 child objects: 1) text input field, 2) checkbox, and 2) button. Each of these objects has a name based on the NAME attribute of the HTML tag that defines it, as follows:

These are the full names of the objects, based on the DOM Hierarchy.

document.myform => the form
document.myform.text1 => the text field (elements[0])
document.myform.Check1 => the checkbox (elements[1])
document.myform.Button1 => the button (elements[2])

NOTE: JavaScript is case sensitive document.myform.Check1 is not the same "Object" as document.myform.check1. In the example above document.bgColor is the correct way to deal with the document's background color but document.bgcolor is not!

Thus, the form Object myform has properties based on the attributes of the <FORM> tag, for example,

document.myform.action is "http://sislands.com/cgi-bin/mail.cgi" , the URL to which the Form is submitted.
document.myform.method is "POST," based on the value of the METHOD attribute.
document.myform.length is "3", because there are 3 <INPUT> Elements in the Form.

The Form Object has child objects named Button1 and text1, corresponding to the button and text field in the Form. These objects have their own properties based on their HTML attribute values, for example,

document.myform.Button1.value is "Press Me"
document.myform.elements[2].name is "Button1"
document.myform.elements[0].name is "text1"

Three different ways to specify an Object's value:

document.myform.text1.value is "blahblah" NOTE: using just the Object names
document.myform.elements[0].value is "blahblah" NOTE: using an Object name & array notation (to specify the object instead of the Object's name)
document.forms[0].elements[0].value is "blahblah" NOTE: using just Array notation

In practice, you refer to these properties using their full names, for example, document.myform.button1.value. This full name is based on the Navigator Object Hierarchy, starting with document, followed by the name of the form, myform, then the element name, button1, and, finally, the property name.

To finish off here are some additional information we can get from the document and Form.

document.myform.Check1.defaultChecked is "true"
document.myform.Check1.value is "ON"
document.myform.elements[1].name is "Check1"

2^nd Example

This simple HTML document creates an anchor, a small Form, and a link to that anchor. This is not intended to be the HTML for a meaningful Web page, but it will nevertheless illustrate the correspondence between HTML elements and JavaScript HTML objects.

<HTML>
<HEAD><TITLE>A very simple HTML page</TITLE></HEAD>
<BODY>
<A NAME="top">This is the top of the page</A>
<HR>
<FORM METHOD="POST" ACTION="mailto:john@tropicalpenguin.com"><P>
Enter your name: <INPUT TYPE="text" NAME="me" SIZE="70"></P>
<INPUT TYPE="Submit" VALUE="OK"> <INPUT TYPE="Reset" VALUE="Oops">
</FORM>
<HR>
Click here to go to the <A HREF="#top">top</A> of the page
</BODY>
</HTML>

This code creates an HTML page with an anchor at the top of the page and a link to that anchor at the bottom. In between is a simple form that allows the user to enter his name. There is a submit button if he gets it right, and a reset button if he doesn't. If the user is successful the form's contents are submitted via a post action to the fictitious e-mail address john@tropicalpenguin.com.

The important aspect of this example is not its primitive HTML, but the fact that the HTML elements in it are reflected in the JavaScript Document Object Model (DOM) hierarchy. We have already seen that we can access the title of this document through the title property of the Document Object. We can also access the other HTML elements of this document using the following properties:

anchors
forms
links

These properties of the Document Object are Arrays representing every HTML element that is an Anchor, Form, or Link on the page. In our particular example there is only one of each, so we would refer to the Anchor at the top of the page as document.anchors[0], the link at the bottom of the page as document.links[0], and the form in the middle of the page as document.forms[0]. These are the top-level HTML objects represented by this document. Each of these elements, in turn, has Properties and Methods that can be used to describe and manipulate it.

In particular, the Form Object corresponding to forms[0] has sub-objects for each of the 3 Form Elements (the reset button, the submit button, and the text input field), as well as properties for the submit method and the submit target. forms[0].elements[0] corresponds to the text input field. forms[0].elements[0].name is the name of that field, as specified by the NAME field, which is "me" in this case. The figure below recapitulates this HTML code and shows how each element in the page is associated with an HTML object.

document.title
|
<TITLE>A very simple HTML page</TITLE>

                             document.anchors[0]
                                             |
<A NAME="top">This is the top of the page</A>
                       |
      document.anchors[0].name

document.forms[0]                               document.forms[0].action
        |                                                                             |
<FORM METHOD="POST" ACTION="mailto:john@tropicalpenguin.com">
                                       |
                 document.forms[0].method

document.forms[0].elements[0] _____ document.forms[0].elements[0].name
| |
<INPUT TYPE="text" NAME="me" SIZE="70">
|
document.forms[0].elements[0].type

document.forms[0].elements[1]        ___ document.forms[0].elements[1].value
        |                                                    |
<INPUT TYPE="Submit" VALUE="OK">
                                  |
      document.forms[0].elements[1].type

document.forms[0].elements[2]        ___ document.forms[0].elements[2].value
        |                                                    |
<INPUT TYPE="Reset" VALUE="Oops">
                                  |
      document.forms[0].elements[2].value

                  document.links[0]
                                 |
<A HREF="#top">top</A> of the page
                        |
       document.links[0].href