从 HTML 到 Javascript 中的多个标签中删除 类 的正确方法是什么

Question

这段代码工作正常：

setTimeout(function(){
    let inactiveClass = document.getElementsByClassName(`nonactive`)
    console.log(inactiveClass)
    inactiveClass[1].classList.remove(`nonactive`)
    inactiveClass[0].classList.remove(`nonactive`)
}, 1000)

但是一旦我将最后两行更改为

setTimeout(function(){
    let inactiveClass = document.getElementsByClassName(`nonactive`)
    console.log(inactiveClass)
    inactiveClass[0].classList.remove(`nonactive`)
    inactiveClass[1].classList.remove(`nonactive`)
}, 1000)

控制台告诉我

script.js:9 Uncaught TypeError: Cannot read property 'classList' of undefined

为什么会这样？

Answer 1

getElementsByClassName returns 找到的元素的 live HTMLCollection。

每删除一项，集合就会变小。所以当你删除 [0] 时，就没有 [1] 了

所以你需要反过来做，或者使用另一个 class 保持不变，或者使用这样的静态列表：

setTimeout(function() {
  [...document.querySelectorAll(`.nonactive`)]
  .forEach(inact => inact.classList.remove(`nonactive`));
}, 1000)

.nonactive {
  color: red;
}

<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>

Answer 2

问题是，只要更新 HTMLCollection 中的元素，HTMLCollection 就会发生变化。所以你必须从结束而不是 HTMLCollection 的开始开始你的迭代...

setTimeout(function() {
  let inactiveClasses = document.getElementsByClassName(`nonactive`)
  for (let i = inactiveClasses.length - 1; i >= 0; i--) {
    const inactiveClass = inactiveClasses[i];
    inactiveClass.classList.remove(`nonactive`)
  }
}, 1000)

div {
  color: green;
}

.nonactive {
  color: red;
}

<div class="nonactive">test1</div>
<div class="nonactive">test2</div>
<div class="nonactive">test3</div>
<div class="nonactive">test4</div>