javascript - 为什么 `forEach.call` 不迭代每个节点并删除类？

Question

我正在删除 forEach.call 中的一个类。由于某种原因，它只调用一次，如下所示。

var all_active = document.getElementsByClassName("active")
Array.prototype.forEach.call(all_active, function(el) {
  el.classList.remove("active");
  console.log(el.tagName);
});

<li class="active dropdown">
  <a>123</a>
  <div class="dropdown-content">
    <a class="active">1</a>
    <a>1</a>
    <a>1</a>
    <a>1</a>
    <a>1</a>
    <a>1</a>
  </div>
</li>

输出是 LI，而我本以为它会给出 LI, A。为什么？

Answer 1

A NodeList是元素的事件集合。当您从第一个元素中删除类时，集合的长度也会减少。因此 forEach() 将结束，因为它已经处理了正确数量的元素。

ASCII 插图可能会有所帮助:

 # On first iteration:      # After first iteration:
┌───────────┬──────────┐   ┌──────────┬──────────┐   
│ NodeList  │ Iterator │   │ NodeList │ Iterator │
├───────────┼──────────┤   ├──────────┼──────────┤
│ li.active │   <──    │   │ a.active │          │
├───────────┼──────────┤   ├──────────┼──────────┤
│ a.active  │          │   │          │    <─    │
└───────────┴──────────┘   └──────────┴──────────┘

在第一次迭代后，li 不再在集合中，因为它不再匹配 "active" 类选择器。

---

您可以通过转动 NodeList 来回避这个问题。使用 Array.from() 进入数组.当您修改节点时，数组内容不会改变，它仍然指向初始节点集。

var all_active = document.getElementsByClassName("active");

Array.from(all_active).forEach(function(el) {
  el.classList.remove("active");
  console.log(el.tagName);
});

<li class="active dropdown">
  <a>123</a>
  <div class="dropdown-content">
    <a class="active">1</a>
    <a>1</a>
    <a>1</a>
    <a>1</a>
    <a>1</a>
    <a>1</a>
  </div>
</li>