1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>GetElements Demonstration</title>
6 <!--
7 File: D:\cssd.local\E\Student Resources\Website Development I\CodeSamples\GetElementsDemonstration.html
8 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
9 copied or excerpted for educational purposes with credit to the author.
10 updated by JMH on May 4, 2022 at 10:56 AM
11 -->
12 </head>
13
14 <body>
15 <p>one</p>
16 <p>two</p>
17 <p>three</p>
18
19 <script>
20 var collectionP = document.getElementsByTagName("p") ;
21 document.writeln( "<div><code>collectionP</code> has type <code>" + typeof collectionP +
22 "</code>.</div>" ) ;
23 document.writeln( "<div><code>collectionP</code> has " + collectionP.length +
24 " elements.</div>" ) ;
25
26 // example #1
27 for ( var k = 0 ; k < collectionP.length ; k++ ) {
28 collectionP[k].style.color = "red" ;
29 }
30
31 // example #2
32 collectionP[1].innerHTML = "four" ;
33 collectionP[1].style.color = "blue" ;
34 collectionP[1].style.fontWeight = "bold" ;
35
36 // example #3
37 collectionP[2].outerHTML = "<h2>five</h2>" ;
38
39 </script>
40
41 <p><br>
42 <hr></p>
43 <p><em>Important Notes:</em> (source:
44 <a href="https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp"
45 target="_blank">https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp</a>)</p>
46 <ul>
47 <li>An <code>HTMLCollection</code> is not an <code>Array</code>!</li>
48 <li>An <code>HTMLCollection</code> may look like an array, but it is not.</li>
49 <li>You can loop through an <code>HTMLCollection</code> and refer to its elements
50 with an index.</li>
51 <li>But you cannot use <code>Array</code> methods like <code>push()</code>,
52 <code>pop()</code>, or <code>join()</code> on an <code>HTMLCollection</code>.</li>
53 </ul>
54 </body>
55
56 </html>