Javascript 实时节点列表循环

Question

也许其他人问了同样的问题，但我没有在可能已经有您的答案的问题中找到任何类似的结果，所以我会继续问我的 question.I 知道那是活着的名单，什么时候第一个 className将列表从 3 项更改为 2 项。所以 i 现在是 1，所以这就是它从列表中跳过 "second item" 的原因。将所有项目包含在循环中的实时节点列表中的最佳方法是什么？（也许使用静态的？）

        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

document.getElementsByClassName 是实时的，这意味着元素将在类名更改时自动删除。

试试这个：

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>

Answer 2

过去使用的一种方法是向后循环集合，这样，如果删除了一个项目，它不会影响任何剩余元素的位置：

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

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

与 NikxDa 提出的 while(hotElements.length > 0) 解决方案相比，这种方法的一个优点是，如果您有条件地应用新的 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。它 returns 一个 non-live NodeList，所以如果你用它来查找元素，你仍然可以向前循环：

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 3

所以标题Javascript Live Nodelist Loop。没有人会担心：

var hotElements = document.getElementsByClassName("hot")
console.log(hotElements)//it's a HTML collection not Nodlist

我只是初学者，但是我知道...

Javascript 实时节点列表循环

Javascript Live Nodelist Loop

javascript

nodelist