javascript - 删除类时 getElementsByClassName() 数组的长度发生变化

Question

我正在尝试改进我的 vanilla JavaScript，并尝试编写一个函数，从列表项和相应的 div 中删除类“active”。我的代码如下:

var elems = document.getElementsByClassName("active");
console.log(elems.length);

for (var i = 0; i < elems.length; i += 1) {
  elems[i].classList.remove("active");
  console.log("end", elems.length);
}

当我第一次登录 elems.length 时，我得到 2。第一次通过循环后，elems.length 现在是 1。这显然会导致功能出现问题的代码。

为什么使用 classList.remove 会导致 elems 的长度发生变化？如何在不使用 jQuery 的情况下获得正确的功能？

Answer 1

getElementsByClassName() 返回一个实时集合；它会随着更少(或更多)元素匹配而改变。

解决此问题的最简单方法是反向执行删除操作:

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

for (var i = elems.length - 1; i >= 0; i--) {
  elems[i].classList.remove("active");
}