按类名获取元素Nodelist不会在每个元素上应用新样式

Question

我想在具有“ hot”类的每个列表项上应用新的类名

<li class="hot">item</li>

我将这些“热门”列表项的节点列表存储在名为“ hotItems”的变量中

var hotItems = document.getElementsByClassName('hot');

并进行了for循环，通过该循环，每个列表项将具有一个名为“ cool”的新类名称。

for(var i = 0; i < hotItems.length; i++){
  hotItems[i].className = 'cool';
}

我看到的结果是，不是每个列表项都有“ cool”类名，只有其他每个元素都有它。

为什么没有将新类名应用于所有列表项？

我尝试使用document.querySelectorAll('.hot')访问“ hoItems”元素，效果很好。

这是指向我的codepen

的链接