javascript - 关于getElementByClassName遍历问题
本文介绍了javascript - 关于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又一切正常!这是什么情况？
解决方案
getElementsByTagName和getElementsByClassName其实一样都是动态的，而由于你是改变了ClassName才会导致你遇到的问题；
简单的说一点就是
getDom一开始是5个，改变了第一个之后，class为icon-ok-circle就只有4个了，然后原本getDom[1]就成为后一步操作中的getDom[0],但此时for循环的i值已经变为1,所以他改变的是之前2位置的,所以会出现隔一个改变的情况这篇关于javascript - 关于getElementByClassName遍历问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
