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

问题描述

此代码可以正常工作：

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

为什么会这样？

解决方法

getElementsByClassName返回找到的元素的实时 HTMLCollection。

每次删除一项时，集合会较小。因此，当您删除[0]时，就没有[1]了

所以您需要做相反的操作，或者使用另一个保留的类，或者使用这样的静态列表：

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>

,

问题是，一旦您更新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>