关于元素集合的相关操作(奇偶行变色)

div:

script:

let box = document.getElementById('box');//获取box盒子

//获取box盒子中所有的li => 获取的是HTMLCollection元素集合(它是一个类数组对象:结构和数组非常相似,但是 不是数组)

let itemList = box.getElementsByTagName('li');

//获取box盒子中所有的h2 => 哪怕没有或者只有一项,获取到的依然是元素集合HTMLCollection元素集合

let title = box.getElementsByTagName('h2');

业务:

//把li实现奇数行和偶数行变色(如果是在CSS中,可以用:nth-child进行操作)

//重复完成事情:分别拿到每一个li元素对象,根据判断它是奇数行还是偶数行,给其设置不同的颜色

for(var i = 0; i < itemList.length; i++){

        //每一次循环,基于变量i的值(等价于集合中对应的索引)获取到当前本轮循环要操作的那个li

        //当前索引是奇数代表偶数行,当前索引是偶数代表奇数行

写法1:if-else

        if(i % 2 == 0){

                    itemList[i].style.color = 'red';

        }else{

                     itemList[i].style.color = 'green';

        }

写法2:三元运算

        i % 2 == 0 ? itemList[i].style.color = 'red' : itemList[i].style.color = 'green';

写法3:switch语句

        switch(i % 2){

                case 0:

                    itemList[i].style.color = 'red';

                    break;

                default:

                    itemList[i].style.color = 'green';

            }

}

最终实现效果如下: