关于getElementByClassName遍历问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkDemo</title>
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
        *{margin: 0;padding: 0}
        body{font-size: 26px;}
        .f-left{float: left}
        .f-right{float: right}
        ul{list-style: none;margin-top: 50px;}
        ul li{height: 30px;padding: 5px 20px}
    </style>
</head>
<body>
    <ul>
        <li>
            <span class="f-left">test</span>
            <span class="f-right"><i class="icon-ok-circle"></i></span>
        </li>
        <li>
            <span class="f-left">test</span>
            <span class="f-right"><i class="icon-ok-circle"></i></span>
        </li>
        <li>
            <span class="f-left">test</span>
            <span class="f-right"><i class="icon-ok-circle"></i></span>
        </li>
        <li>
            <span class="f-left">test</span>
            <span class="f-right"><i class="icon-ok-circle"></i></span>
        </li>
        <li>
            <span class="f-left">test</span>
            <span class="f-right"><i class="icon-ok-circle"></i></span>
        </li>
    </ul>
    <script type="text/javascript">
        var getDom=document.getElementsByClassName("icon-ok-circle")
        console.log(getDom)
        for(var i=0;i<getDom.length;i++){
            console.log(i)
            getDom[i].className="icon-ok-sign"
            //getDom[i].setAttribute("class","icon-ok-sign")
        }
    </script>
</body>
</html>

加上getDom[i].className="icon-ok-sign"这行console.log(i)输出的是0-2三个数不正常不加getDom[i].className="icon-ok-sign"这行console.log(i)输出的是0-4五个数,把getElementsByClassName换成getElementsByTagName又一切正常!正常这是什么情况?

阅读 14k
4 个回答

getElementsByTagName和getElementsByClassName其实一样都是动态的,而由于你是改变了ClassName才会导致你遇到的问题;
简单的说一点就是

getDom一开始是5个,改变了第一个之后,class为icon-ok-circle就只有4个了,然后原本getDom[1]就成为后一步操作中的getDom[0],但此时for循环的i值已经变为1,所以他改变的是之前2位置的,所以会出现隔一个改变的情况
getDom[i].className="icon-ok-sign"//这句话等于给这个dom的class改成icon-ok-sign

因为你是依照classname找的元素啊!忘记在哪看到的了,getElementBy找到元素是动态的,元素改变会导致对应的结果改变(这句话出处不好找了,记得是好久之前看到的)。就比如把for循环去掉,只执行一次的话,getDom数组里的元素就只剩下四个了。所以这个for循环只会执行三次。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏