1 <html>
2 <head>
3 <title>Test</title>
4 </head>
5 <body>
6
7 <p>h</p>
8 <p>e</p>
9 <hr />
10 <p>l</p>
11 <p>l</p>
12 <hr />
13 <p>o</p>
14
15 <script type="text/javascript">
16
17 // Call the "broken" version of CombinedElementList
18 // This function fails in both IE and Firefox, even
19 // though at first glance it looks fine. Reason?
20 // getElementsByTagName *doesn't* return an array,
21 // instead it returns a "dispHTMLElementCollection"
22 // which looks and acts exactly like an array, but
23 // has no .push() method.
24
25 //var combo = CombinedElementListBroken();
26
27 // The "fixed" version uses a Javascript array to
28 // store the results of the two
29 // getElementsByTagName calls.
30
31 var combo = CombinedElementListWorks();
32
33 alert(combo.length); // Expect: 7
34
35 function CombinedElementListBroken()
36 {
37 // Create two "arrays" of HTML elements
38 var paras = document.getElementsByTagName('P');
39 var hrs = document.getElementsByTagName('HR');
40
41 // Attempt to combine the two using a simple FOR loop
42 for (var i = 0; i < hrs.length; i++)
43 {
44 // IE: Object doesn't support this property or method
45 // Firefox: paras.push is not a function
46 paras.push(hrs[i]);
47 }
48
49 return (paras);
50 }
51
52 function CombinedElementListWorks()
53 {
54 // Create two "arrays" of HTML elements
55 var paras = document.getElementsByTagName('P');
56 var hrs = document.getElementsByTagName('HR');
57
58 // Create a third, blank, array to store the combined list
59 var combinedArr = new Array();
60
61 // Puts elements from the first "array" into the combined array
62 for (var i = 0; i < paras.length; i++)
63 {
64 combinedArr.push(paras[i]);
65 }
66
67 // And the second
68 for (var i = 0; i < hrs.length; i++)
69 {
70 combinedArr.push(hrs[i]);
71 }
72
73 return (combinedArr);
74 }
75
76 </script>
77
78 </body>
79 </html>