JavaScript 选择集
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择集</title> <script> window.onload = function(){ // aList = document.getElementsByTagName('list1'); // 这里使用TagName寻找元素, 不用使用id名, 也不用使用class名, 只需要输入table标签名即可. aList = document.getElementsByTagName('li'); aList02 = document.getElementById('list02') aLi02 = aList02.getElementsByTagName('li'); // 此方法读取的是html内所有同名标签, 需要针对某类标签使用的时候, 需要对父集元素设置id, 先byId获取父集, 然后在父集内byTab var ilen=aList.length; // alert(aList); // alert(aList.length); 直接通过TagName获取的元素, 并不是数组, 也不是元素, 而是 !!选择集!!. aList[4].style.backgroundColor = 'red'; // 选择集只能通过下标使用, 不能同时设置多个, 所以想要全部设置需要用for 循环. for(i=0;i<ilen;i++){ aList[i].style.backgroundColor = 'cyan'; if(0==i%2){ aList[i].style.backgroundColor = 'red'; } } var iLen02=aLi02.length; alert(iLen02); for(i=0;i<iLen02;i++){ aLi02[i].style.backgroundColor = 'plum'; if(0==i%2){ aLi02[i].style.backgroundColor = 'violet'; } } } </script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <ul id="list02"> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> </ul> </body> </html>