我的问题是：我正在尝试通过 Hot 类的 NODELIST 。我想将他们的 className 更改为 'cool' 。当我使用 for 循环时，它的第二个 li 似乎没有改变颜色。有谁知道我在这里犯了什么错误，第二个 li 元素没有改变颜色。
谢谢
var elements = document.getElementsByClassName('hot');
var i;
for(i = 0; i < elements.length; i++) {
elements[i].className = 'cool';
}
*{
box-sizing: border-box;
}
.hot {
background-color: red;
border: 1px solid black;
padding: 10px;
margin-top: 1px;
font-size: 25px;
list-style-type: none;
}
.cool {
background-color: blue;
padding: 10px;
color: white;
font-size: 25px;
}
<html>
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy Greoceries</h2>
<ul>
<li id="one" class="hot"><em>Fresh</em>figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegear</li>
</ul>
</div>
</body>
</html>
getElementsByClassName返回活动节点列表。一旦您更改了一个元素上的类，节点列表就会更新以反映这一点，因此您的索引将始终消失。
缓解这种情况的一种方法是将节点列表转换为静态节点列表，使用Array.slice.call:
var elements = [].slice.call(document.getElementsByClassName('hot'));
DEMO https://jsfiddle.net/9t271v2b/1/
正如您所指出的，另一种方法是使用document.querySelectorAll它返回一个静态节点列表：
document.querySelectorAll('.hot');
DEMO https://jsfiddle.net/9t271v2b/2/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
