The document Object Collections

One thing that the document object is good for is giving you access to the objects in a web page, organizing things from the top down. Not only does it have the getElementById , getElementsByName , and getElementsByTagName methods , but it also supports the collections (that is, object arrays) you see in Table 9.3. (For the definition of a particular collection, see Table 9.2.)

Table 9.3. The Collections of the document Object

Properties
`all`	`anchors`	`applets`
`childNodes`	`embeds`	`forms`
`frames`	`images`	`ids`
`layers`	`links`	`namespaces`
`scripts`	`styleSheets`	`tags`

For example, here's how you might use the anchors collection to access a particular anchor's href property:

(Listing 09-01.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using the anchors Collection</TITLE>      </HEAD>      <BODY>          <H1>Using the anchors Collection</H1>          Take a look at <A HREF="http://www.w3c.org" NAME="W3C">W3C</A>          <BR>          <SCRIPT LANGUAGE="JavaScript">              <!--  document.write("(The link's URL is " + document.anchors[0].href + ")")  // -->          </SCRIPT>      </BODY>  </HTML>

You can see the results in Figure 9.1.

Figure 9.1. Using the `anchors` collection.

graphics/09fig01.gif

Using the document object's collections, you can get a handle on any object in a web pageI recommend you take a look at Table 9.3 to get familiar with what's available. Note also that you don't need to access objects in a collection by numeric index onlyif an element has a NAME (not ID ) attribute, you can use that name with Netscape Navigator collections like this: document.anchors["anchor1"].href . If an element has a NAME or ID attribute, you can use that attribute's value with Internet Explorer collections like this (note parentheses, not square brackets here): document.anchors("anchor1").href .

The document Object Collections