Using Collections | Dynamic HTML in Action

A collection, as you learned in Chapter 5, is a numbered grouping of related items that are associated with an object. For example, in Internet Explorer versions 4 and later and in Netscape Navigator versions 3 and later the document object contains a collection named images, which refers to all the images on the page. The document object in Internet Explorer supports the all collection, which contains references to all the elements on the entire page. Another example is the cells collection of the TR element, which retrieves all the cells in a particular row of a table. A complete list of all the collections supported by Internet Explorer can be found in Appendix C. Detailed descriptions of the collections can be found on the SBN Workshop Web site and on the CD that accompanies this book. On the CD see Workshop (References); DHTML, HTML & CSS; DHTML References; Collections. Online, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD, and choose DHTML Collections.

Because collections are stored as numbered lists, you refer to an item in one of these lists with the collection name followed by the index (the numbered position of that item in the list) in parentheses. Collections are ordered using zero-based numbering: the index of the first item in the list is 0, the index of the second item is 1, and so on.

Code Listing 7-5 provides an example of three ways you can use the all collection, as well as an example of how to use the images collection. In Figure 7-14, you can see the initial display of this page. Figure 7-15 shows a dialog box containing all the tag names in the all collection, along with their indexes. In Figures 7-16 and 7-17, you can see how we used the all collection to change the images. Figure 7-18 shows what happens when the button is clicked and the image is changed through the images collection.

NOTE
If you are confused by the fact that collections are numbered starting with 0 rather than with 1, don't worry—you are joining the ranks of thousands of other confused individuals. In the programming world, most counting starts from 0. This, like many other seemingly strange programming practices, has its roots in binary mathematics, which is the basis of computing. Imagine a programmer from the 1950s who needs to make a list of all possible combinations that can be created with a set of bits, each of which can be either turned off or turned on. The first combination in the list has all the bits turned off. In binary counting, "all off" is represented by the numeral 0. The second combination has all but the first of the bits turned off. This combination is represented by the binary number 1. Thus, a confusing practice was born in which the first item in a list is numbered 0. But don't despair—you'll find that adapting to this system of counting is fairly easy.

Code Listing 7-5.

 <HTML> <HEAD> <TITLE>Listing 7-5</TITLE> <SCRIPT LANGUAGE="JavaScript"> function doIt(){   if (document.all){     alert("First let's get a numbered list of all page elements.")        strTagList=""       for(i=0; i<document.all.length; i++) {       strTagList+=(i+"\t"+document.all(i).tagName+"\n")     }     alert(strTagList)        alert("Now change the second IMG using absolute index.")     document.all(6).src="square.gif"        alert("Finally, change the third IMG using relative index.")     document.all.tags("IMG")(2).src="square.gif"   } } </SCRIPT> </HEAD> <BODY> <IMG SRC="circle.gif"> <IMG SRC="circle.gif"> <IMG SRC="circle.gif"> <FORM> Use the all collection. <INPUT TYPE="button" VALUE="Go" onclick="doIt()"><BR> Use the images collection. <INPUT TYPE="button" VALUE="Go" onclick="document.images[1].src=`x.gif'"> </FORM> </BODY> </HTML>

click to view at full size.

Figure 7-14. The Internet Explorer window before any changes are made.

When the first button is clicked, its inline event handler calls the doIt function. This function first tests to see whether the all collection exists and proceeds only if it does. This is because Netscape Navigator and early versions of Internet Explorer might give errors if you try to use the all collection. If it does exist, an Alert dialog box notifies the user that a numbered list of all page elements is needed. When the user clicks OK, the function creates this list by using a for loop to go through the entire all collection, combining each element's position in the collection (its index) with its tag name and adding the result to the variable strTagList. (You'll learn more about for loops in Chapter 9 and examine variables and formatting tools such as \n in Chapter 8.) The for loop starts at 0 and goes through document.all.length, a property of the all collection that specifies how many items the all collection contains. The contents of the strTagList variable are then displayed in an Alert dialog box, as seen in Figure 7-15.

click to view at full size.

Figure 7-15. This Alert dialog box lists each page element and its index.

When the user clicks OK, a new Alert dialog box appears, notifying the user that the second image will change. Once the user clicks the OK button in this new dialog box, the image is referred to by its index within the all collection. As indicated in the list of tags (see Figure 7-15), the second image is in position 6 in the list. Thus, we can use the expression document.all(6) to refer to it. We then use this reference to change the src property of the image, altering its appearance as shown in Figure 7-16.

Another way of referring to an item in the all collection is by specifying its location relative to other tags of its type. The tags method of the all collection returns another collection of all the tags of a specified name. We can use this method to get a collection of all the IMG tags and then change the third item in this new collection:

 document.all.tags("IMG")(2).src="square.gif"

click to view at full size.

Figure 7-16. The all collection was just used to alter the item at index 6 (the second image). Next the third image will be changed.

Because collections are zero-ordered, the third image is at index 2 in the collection of IMG tags. You can see the effects of this code in Figure 7-17.

click to view at full size.

Figure 7-17. The all collection is used with the tags method to alter the third image.

Another common collection used in Netscape Navigator versions 3 and later and in Internet Explorer versions 4 and later is document.images. This is essentially a preexisting collection that is the same as the one returned by document.all.tags("IMG") in Internet Explorer. Figure 7-18 shows the effects of clicking the second button on the page, which changes one of the images using the images collection. This button has the same effect in both browsers.

click to view at full size.

Figure 7-18. The images collection is used to alter the second image.

This chapter has focused on how script can interact with the Object Model. Next we will deal with script in a more pure form. The following chapter explains the types of data found in JScript, as well as how to manipulate that data.