循环遍历节点列表 JS答案

【问题标题】：Looping through a nodelist JS循环遍历节点列表 JS
【发布时间】：2016-06-25 14:14:33
【问题描述】：

我的问题是：我正在尝试通过 Hot 类的节点列表。我想将他们的 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>

【问题讨论】：

是另一种风格吗？例如：对于#two 元素？

标签： javascript html css

【解决方案1】：

getElementsByClassName 返回一个活动节点列表。一旦您更改了一个元素上的类，节点列表就会更新以反映这一点，因此您的索引将永远不在。

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

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

DEMO

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

document.querySelectorAll('.hot');

DEMO

【讨论】：

你是对的。我可以使用静态的 querySelectorAll() 吗？