07-JavaScript 通过标签获取元素

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过标签获取元素</title>
    <script>
        window.onload = function(){
            
            // 通过标签名称获取页面所有li元素，生成一个选择集，赋值给aLi
            var aLi = document.getElementsByTagName('li')

            // 读取选择集内元素的个数，弹出13
            alert(aLi.length);

            var iLen = aLi.length;

            // 不能这样给选择集设置样式属性,会报错
            // aLi.style.backgroundColor="gold";

            // 可以单独设置选择集中的单个元素，比如：aLi[0]
            aLi[0].style.backgroundColor="red";

            // 或者用for循环设置每一个元素：
            for(var i=0;i<iLen;i++)
            {
                // aLi[i].style.backgroundColor="gold";
            }


  
            var oUl = document.getElementById("list");
            var aLi2 = oUl.getElementsByTagName("li");
            alert(aLi2.length);
            for(var i=0;i<aLi2.length;i++)
            {
                if(i%2 == 0){
                    aLi2[i].style.backgroundColor="red"
                }
            }
        }



    </script>
</head>
<body>
     <ul id="list">
         <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="list2">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
     </ul>
    
</body>
</html>

 

posted @ 2019-03-18 23:33  greenfan  阅读(599)  评论(0)    收藏  举报