<!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又一切正常!
这是什么情况?
getElementsByTagName和getElementsByClassName其实一样都是动态的,而由于你是改变了ClassName才会导致你遇到的问题;
简单的说一点就是