javascript - 如何从具有多个元素和类的 div 容器中删除一个 css 类？

Question

我想获取属于两个特定不同类的所有元素，并从这些元素中分别删除和添加这些类。我试过:

.concealed {
  display: none;
}
.slide {
  background: #333;
  color: #fff;
}

// <div class="slide concealed">myText</div><br>
<div class="slide"><div class="concealed">myText</div></div><br>
<div class="slide"><div class="concealed">myText_2</div></div><br>
<div class="slide"><div class="concealed">myText_3</div></div><br>

    // var slides = document.getElementsByClassName('slide');
    // var slides = document.querySelectorAll('.slide, .concealed');
       var slides = document.getElementsByClassName('slide concealed');

slides[0].classList.remove("concealed");

如您所见，我尝试了多种方法来实现此目的，但我只能在执行 var slides = document.getElementsByClassName('concealed'); 时删除和添加“隐藏”。当使用多个类名执行 getElementsByClassName 时，它似乎错过了隐藏 并且只得到幻灯片。例如。在 document.getElementsByClassName('slide concealed'); 之后执行 slides[0].classList.remove("concealed"); 没有任何效果。

我确定我遗漏了一些东西，这并不难实现。有任何想法吗？谢谢。

Answer 1

问题是 getElementsByClassName是一个实时 HTMLCollection。当一个元素不再匹配时(因为你已经删除了该类)，它将从集合中删除:

const list = document.getElementsByClassName("example");
console.log(list.length);       // 2
console.log(list[0].innerHTML); // "A"
list[0].classList.remove("example");
console.log(list.length);       // 1
console.log(list[0].innerHTML); // "B"

<div class="example">A</div>
<div class="example">B</div>

这意味着如果您正在执行一个循环并对第一个条目进行操作，然后递增您的索引，您将错过曾经是第二个条目的内容，因为它现在是第一个条目。

解决这个问题的几种方法:

1. 向后循环，或者
2. 在开始之前将 HTMLCollection 转换成一个数组，或者
3. 使用querySelectorAll获取快照NodeList，这样列表内容在您更新时不会改变。

下面是一个使用 querySelectorAll 从一系列元素中删除类 red 和 bold 的示例，因此 NodeList是静态的:

setTimeout(() => {
    const list = document.querySelectorAll(".red, .bold");
    for (let n = 0; n < list.length; ++n) {
        list[n].classList.remove("red");
        list[n].classList.remove("bold");
    }
}, 800);

.red {
    color: red;
}
.bold {
    font-weight: bold;
}

<div class="red">red 1</div>
<div class="bold">bold 1</div>
<div class="red bold">red 2 and bold 2</div>
<div class="bold">bold 3</div>
<div class="bold">bold 4</div>

---

另见 my answer here : NodeList 现在正式可迭代，这意味着您应该能够在其上使用for-of 循环。该答案显示了如何在尚未实现它的稍旧的环境中填充它。它还展示了如何向 HTMLCollection 添加可迭代性(但请注意 HTMLCollection 未指定为可迭代)。