Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Some of the real power of the document object, however, is realized by making use of the objects underneath it in the hierarchy—particularly the different HTML forms elements available. This is because HTML forms can be one of the primary ways of interacting with the user of a Web page. The next few sections of this chapter discuss the objects used to interact with HTML forms.

JavaScript Object Arrays

Before you read about the other objects in the Web browser object hierarchy, now is a good time to learn about JavaScript’s object array. An object array is what JavaScript uses to reference objects when more than one of the objects is in the current window or document (known as multiple instances of the object). An HTML document is likely to contain more than one hypertext link, for example, so more than one link and anchor object will be present. Each form requires a separate form object, each image an image object, and so on.

JavaScript gives you multiple ways of referencing and accessing these objects. Consider the following excerpt of HTML code, for example:

<FORM NAME=MyForm1 ACTION=… METHOD=…>
    HTML Form elements…
</FORM>
<FORM NAME=MyForm2 ACTION=… METHOD=…>
    HTML Form elements…
</FORM>

The first way to use JavaScript to reference these forms is to use the conventional object hierarchy that you have seen thus far. To set the value of a text field named MyText1 in the first form, for example, you would use something like this:

document.MyForm1.MyText1.value=“Some Value”

JavaScript, on the other hand, gives you several other ways to reference these objects using JavaScript’s object arrays. Objects are contained in an object array in the order in which they are defined in the document. Assuming that the two previously mentioned forms are the only two forms in the document, the first can be referenced using

document.forms[0]

and the second with

document.forms[1]

Thus, the same text field could be set using

document.forms[0].MyText1.value=“Some Value”

The third way to reference objects in an object array is to use JavaScript’s associative arrays. With associative arrays, the array element is referenced by including its name as the argument of the array. Using this method, the two forms would be referenced as

document.forms[“MyForm1”]

and

document.forms[“MyForm2”]

and the text field set using

document.forms[“MyForm1”].MyText1.value=“Some Value”

These examples show the three ways to reference JavaScript objects when multiple instances of them exist. Which should you use? That depends on the application:

•  Object Hierarchy Referencing. For example,
document.MyForm1.MyText1.value
Use this method when you are dealing with one or two objects, each with a predefined name and separate actions associated with each.

•  Object Array with Numerical Index. For example,
document.forms[0].MyText1.value
Use this method when you want to repeat an action over multiple objects using a JavaScript for or while loop.

•  Object Associative Array. For example,
document.forms[“MyForm1”].MyText1.value
Use this method when you want to operate on one or two objects only, but the specific object may vary.

---

CAUTION:  

If you are designing HTML documents and wish to remain compatible with Netscape Navigator 2.0 (if you are programming for a corporate intranet that hasn’t upgraded in a long while, for instance), you can use only the numerical index method of referencing object arrays.

---

For a given HTML document, some of the predefined object arrays that JavaScript can access (depending on what is defined in the document) are the following:

•  anchors—One for each of the <A> tags containing a NAME attribute

•  applets—One for each <APPLET> tag

•  arguments—One for each argument of a JavaScript function

•  elements—One for each element in an HTML form

•  embeds—One for each <EMBED> tag

•  forms—One for each HTML form

•  frames—One for each <FRAME> tag in a window containing a <FRAMESET>

•  history—One for each entry in the history list for a window

•  images—One for each <IMG> tag

•  links—One for each <AREA> and/or <A> tag containing an HREF attribute

•  mimeTypes—One for each MIME type supported by the client Web browser, its helper applications, plug-ins, and (primarily for Internet Explorer) ActiveX Controls

•  options—One for each <OPTION> tag

•  plugins—One for each plug-in installed on the client Web browser

The link, area, and anchor Objects

These objects are created within a document when hypertext links or targets are created using the <A> or <AREA> tag. A link object is created when the <A> tag uses the HREF attribute, and the anchor object is created when it uses the NAME attribute. area objects are created for each <AREA> tag used for creating client-side imagemaps.

•  See “Client-Side Imagemaps,” p. xxx. (Ch. 4, “Imagemaps”)

link and area objects are referenced through the link’s object array. Each object in this array has the same properties as a location object (see Table 19.1 earlier in the chapter). In addition, these objects have the events listed in Table 19.3.