第二十五节 JavaScript通过标签获取元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript">
 7         window.onload = function(){
 8 
 9             // 通过标签名称获取li元素，生成一个选择集，不是数组，但是有一些数组的方法同样可以使用。
10             var aLi = document.getElementsByTagName('li');
11             alert(aLi.length);
12 
13             // aLi.style.backgroundColor = 'gold';
14             // aLi是一个选择集，不能这样给属性。
15 
16             aLi[0].style.backgroundColor = 'gold';
17             // 可以通过下标具体给指定的li标签加背景色，如果全部li都要加，需要用for循环。
18             for(var i=0;i<aLi.length;i++){
19                 aLi[i].style.backgroundColor = 'gold';
20             }
21 
22             var oUl = document.getElementById('list1');
23             var aLi2 = oUl.getElementsByTagName('li');
24             for(var i=0;i<aLi2.length;i++){
25                 aLi2[i].style.backgroundColor = 'green';
26             }
27         }
28     </script>
29 </head>
30 <body>
31     <ul id="list1">
32         <li>1</li>
33         <li>2</li>
34         <li>3</li>
35         <li>4</li>
36         <li>5</li>
37         <li>6</li>
38         <li>7</li>
39         <li>8</li>
40     </ul>
41 
42     <ul id="list2">
43         <li>1</li>
44         <li>2</li>
45         <li>3</li>
46         <li>4</li>
47         <li>5</li>
48     </ul>
49 </body>
50 </html>