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>
原文地址:https://www.cnblogs.com/jrri/p/11347327.html