This chapter is from the book
This chapter is from the book
This chapter is from the book
10.4 DOM Collections
Included in the Document Object Model is the notion of collections, which are groups of related objects on a page. DOM collections are accessed as properties of DOM objects such as the document object or a DOM node. The document object has properties containing the images collection, links collection, forms collection and anchors collection. These collections contain all the elements of the corresponding type on the page. Figure 10.3 gives an example that uses the links collection to extract all of the links on a page and display them together at the bottom of the page.
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 10.3: collections.html -->
6 <!-- Using the links collection. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Using Links Collection</title>
10 <style type = "text/css">
11 body { font-family: arial, helvetica, sans-serif }
12 h1 { font-family: tahoma, geneva, sans-serif;
13 text-align: center }
14 p { margin: 5% }
15 p a { color: #aa0000 }
16 .links { font-size: 14px;
17 text-align: justify;
18 margin-left: 10%;
19 margin-right: 10% }
20 .link a { text-decoration: none }
21 .link a:hover { text-decoration: underline }
22 </style>
23 <script type = "text/javascript">
24 <!--
25 function processlinks()
26 {
27 var linkslist = document.links; // get the document's links
28 var contents = "Links in this page:\n<br />| ";
29
30 // concatenate each link to contents
31 for ( var i = 0; i < linkslist.length; i++ )
32 {
Fig. 10.3. Using the links collection. (Part 1 of 2.)
33 var currentLink = linkslist[ i ]; 34 contents += "<span class = 'link'>" + 35 currentLink.innerHTML.link( currentLink.href ) + 36 "</span> | "; 37 } // end for 38 39 document.getElementById( "links" ).innerHTML = contents; 40 } // end function processlinks 41 // --> 42 </script> 43 </head> 44 <body onload = "processlinks()"> 45 <h1>Deitel Resource Centers</h1> 46 <p><a href = "http://www.deitel.com/">Deitel's website</a> contains 47 a rapidly growing 48 <a href = "http://www.deitel.com/ResourceCenters.html">list of 49 Resource Centers</a> on a wide range of topics. Many Resource 50 centers related to topics covered in this book, 51 <a href = "http://www.deitel.com/iw3htp4">Internet and World Wide 52 Web How to Program, 4th Edition</a>. We have Resouce Centers on 53 <a href = "http://www.deitel.com/Web2.0">Web 2.0</a>, 54 <a href = "http://www.deitel.com/Firefox">Firefox</a> and 55 <a href = "http://www.deitel.com/IE7">Internet Explorer 7</a>, 56 <a href = "http://www.deitel.com/XHTML">XHTML</a>, and 57 <a href = "http://www.deitel.com/JavaScript">JavaScript</a>. 58 Watch the list of Deitel Resource Centers for related new 59 Resource Centers.</p> 60 <div id = "links" class = "links"></div> 61 </body> 62 </html>
)
Fig. 10.3. Using the links collection. (Part 2 of 2.)
The XHTML body contains a paragraph (lines 46–59) with links at various places in the text and an empty div (line 60) with id links. The body's onload attribute specifies that the processlinks method is called when the body finishes loading.
Method processlinks declares variable linkslist (line 27) to store the document's links collection, which is accessed as the links property of the document object. Line 28 creates the string (contents) that will contain all the document's links, to be inserted into the links div later. Line 31 begins a for statement to iterate through each link. To find the number of elements in the collection, we use the collection's length property .
Line 33 inside the for statement creates a variable (currentlink) that stores the current link. Note that we can access the collection stored in linkslist using indices in square brackets, just as we did with arrays. DOM collections are stored in objects which have only one property and two methods—the length property, the item method and the namedItem method. The item method—an alternative to the square bracketed indices—can be used to access specific elements in a collection by taking an index as an argument. The namedItem method takes a name as a parameter and finds the element in the collection, if any, whose id attribute or name attribute matches it.
Lines 34–36 add a span element to the contents string containing the current link. Recall that the link method of a string object returns the string as a link to the URL passed to the method. Line 35 uses the link method to create an a (anchor) element containing the proper text and href attribute.
Notice that variable currentLink (a DOM node representing an a element) has a specialized href property to refer to the link's href attribute. Many types of XHTML elements are represented by special types of nodes that extend the functionality of a basic DOM node. Line 39 inserts the contents into the empty div with id "links" (line 60) in order to show all the links on the page in one location.
Collections allow easy access to all elements of a single type in a page. This is useful for gathering elements into one place and for applying changes across an entire page. For example, the forms collection could be used to disable all form inputs after a submit button has been pressed to avoid multiple submissions while the next page loads. The next section discusses how to dynamically modify CSS styles using JavaScript and DOM nodes.