Javascript Live Nodelist Loop

Question

也许有人问过同样的问题，但我没有在可能已经有你的答案的问题中找到任何类似的结果，所以我会继续问我的问题。我知道这是活着的列表，当第一个className将列表从3项改为2。所以我现在是1，所以这就是为什么它跳过列表中的“第二项”。在循环中包含活动节点列表中的所有项目的最佳方式是什么？ （也许用一个静态？）

 var hotElements = document.getElementsByClassName("hot"); 
 
     var i; 
 
     var len = hotElements.length; 
 

 
     for (i= 0; i < len ; i++) { 
 
      hotElements[i].className = "pink"; 
 
    }

 .hot { 
 
    background-color: red; 
 
    color: black; 
 
    font-size: 20px; 
 
    weight: 700; 
 
} 
 
.cool { 
 
    background-color: blue; 
 
    font-size: 25px; 
 
} 
 
.pink { 
 
    background-color: pink; 
 
    font-size: 35px;

<h1 id="header"> List King </h1> 
 
<h2> Buy grocceries </h2> 
 
<ul> 
 
    <li id="one" class="hot"> Fresh </li> 
 
    <li id="two" class="hot"> Fresh 1</li> 
 
    <li id="three" class="hot"> Fresh 2 </li> 
 
    <li id="one" class="cool"> Fresh </li> 
 
    <li id="two" class="cool"> Fresh 1</li> 
 
    <li id="three" class="cool"> Fresh 2 </li> 
 
</ul>

Answer 1

一种方法是遍历集合倒退，这种方式：

试试这个任何其余的元素：

var hotElements = document.getElementsByClassName("hot"), 
    i; 

for (i = hotElements.length - 1; 0 <= i; i--) { 
    hotElements[i].className = "pink"; 
} 

一个优点这种方法在while(hotElements.length > 0)解决方案，0123建议的是，如果您有条件地应用新的className而不是对每个元素执行操作，它都不依赖于要删除的元素。

您也可以将活动节点集合转换为不会更改的实数组。

使用ES2015这是很容易使用spread语法做：

var hotElements = document.getElementsByClassName("hot"); 

[...hotElements].forEach(function (element) { 
    element.className = "pink"; 
}); 

你也可以做到这一点在ES5多一点代码：

var hotElements = document.getElementsByClassName("hot"); 

Array.prototype.slice.call(hotElements).forEach(function (element) { 
    element.className = "pink"; 
}); 

使用slice转换成数组在IE < 9中不起作用...但在此时此可能不是问题。

另一种方法是使用querySelectorAll。它返回一个非活节点列表，所以如果你用它来寻找元素，你仍可以循环遍历其转发：

var hotElements = document.querySelectorAll(".hot"), 
    i, 
    len = hotElements.length; 

for (i = 0; i < len ; i++) { 
    hotElements[i].className = "pink"; 
} 

有趣的相关文章：A comprehensive dive into NodeLists, Arrays, converting NodeLists and understanding the DOM

Answer 2

document.getElementsByClassName是活的，这意味着元素将被自动时，他们的className改变删除。如果项目被删除它不会影响的立场是，在过去使用

var hotElements = document.getElementsByClassName("hot"); 
 

 
// While loop to iterate while there are items left 
 
while(hotElements.length > 0) { 
 
    hotElements[0].className = "pink"; 
 
} 

.hot { 
 
    background-color: red; 
 
    color: black; 
 
    font-size: 20px; 
 
    weight: 700; 
 
} 
 
.cool { 
 
    background-color: blue; 
 
    font-size: 25px; 
 
} 
 
.pink { 
 
    background-color: pink; 
 
    font-size: 35px;

<h1 id="header"> List King </h1> 
 
<h2>Buy groceries</h2> 
 
<ul> 
 
    <li id="one" class="hot"> Fresh </li> 
 
    <li id="two" class="hot"> Fresh 1</li> 
 
    <li id="three" class="hot"> Fresh 2 </li> 
 
    <li id="one" class="cool"> Fresh </li> 
 
    <li id="two" class="cool"> Fresh 1</li> 
 
    <li id="three" class="cool"> Fresh 2 </li> 
 
</ul>