gpt4 book ai didi

javascript - 循环遍历节点列表 JS

转载 作者:太空宇宙 更新时间:2023-11-03 21:22:47 25 4
gpt4 key购买 nike

我的问题是:我正在尝试通过 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 返回事件节点列表。一旦您更改了一个元素的类,节点列表就会更新以反射(reflect)这一点,因此您的索引将始终存在。

缓解这种情况的一种方法是使用 Array.slice.call 将节点列表转换为静态节点列表:

var elements = [].slice.call(document.getElementsByClassName('hot'));

DEMO

正如您所指出的,另一种方法是使用 document.querySelectorAll 返回静态节点列表:

document.querySelectorAll('.hot');

DEMO

关于javascript - 循环遍历节点列表 JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35921503/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com