Question

我有一些HTML代码，如下所示：

<html><head></head><body>
<span class="cls1">test</span>
<span class="cls1">test</span>
<span class="cls1">test</span>
<span class="cls1">test</span>
<span class="cls1">test</span>
<span class="cls1">test</span>
<span class="cls1">test</span>
<style>
  .cls1 {
    color: red;
  }  
</style>
</body></html>

然后，我想使用一些JavaScript代码来切换这些元素的cls1类。我输入了这些行。输出也如下：

> for (elem of document.getElementsByClassName("cls1")) { console.log(elem); elem.classList.toggle("cls1") }
<span class="cls1">
debugger eval code:1:65
<span class="cls1">
debugger eval code:1:65
<span class="cls1">
debugger eval code:1:65
<span class="cls1">
debugger eval code:1:65
false
> for (elem of document.getElementsByClassName("cls1")) { console.log(elem); elem.classList.toggle("cls1") }
<span class="cls1">
debugger eval code:1:65
<span class="cls1">
debugger eval code:1:65
false
> for (elem of document.getElementsByClassName("cls1")) { console.log(elem); elem.classList.toggle("cls1") }
<span class="cls1">
debugger eval code:1:65
false
> for (elem of document.getElementsByClassName("cls1")) { console.log(elem); elem.classList.add("cls1") }
undefined
> for (elem of document.getElementsByTagName("span")) { console.log(elem); elem.classList.add("cls1") }
<span class="">
debugger eval code:1:63
<span class="">
debugger eval code:1:63
<span class="">
debugger eval code:1:63
<span class="">
debugger eval code:1:63
<span class="">
debugger eval code:1:63
<span class="">
debugger eval code:1:63
<span class="">
debugger eval code:1:63
undefined
> for (elem of document.getElementsByClassName("cls1")) { console.log(elem); }
<span class="cls1">
debugger eval code:1:65
<span class="cls1">
debugger eval code:1:65
<span class="cls1">
debugger eval code:1:65
<span class="cls1">
debugger eval code:1:65
<span class="cls1">
debugger eval code:1:65
<span class="cls1">
debugger eval code:1:65
<span class="cls1">
debugger eval code:1:65
undefined
> var elems = document.getElementsByClassName("cls1")
undefined
> elems
HTMLCollection { 0: span.cls1, 1: span.cls1, 2: span.cls1, 3: span.cls1, 4: span.cls1, 5: span.cls1, 6: span.cls1
, length: 7 }

> for (elem of elems) { console.log(elem); elem.classList.toggle("cls1") }
<span class="cls1">
debugger eval code:1:31
<span class="cls1">
debugger eval code:1:31
<span class="cls1">
debugger eval code:1:31
<span class="cls1">
debugger eval code:1:31
false

我认为错误的是document.getElementsByClassName可以找到所有七个元素，但是elem.classList.toggle仅适用于其中的一半。对我来说这是一个荒谬的问题。怎么了？

Answer 1

请改用.querySelectorAll()，有关更多信息，请参见此帖子Get All Elements By ClassName and Change ClassName

来自 MDN

与往常一样，返回的集合是活动的，这意味着它始终反映以调用函数的元素为根的DOM树的当前状态。将与名称匹配的新元素添加到子树后，它们会立即出现在集合中。同样，如果不匹配名称的现有元素已调整其类集以使其匹配，则它会立即出现在集合中。

反之亦然；由于元素不再与名称集匹配，它们会立即从集合中删除。

let elements = document.querySelectorAll(".cls1");
for(let elem of elements) {
  console.log(elem);
  elem.classList.toggle("cls1");
}

.cls1 {
  color: red;
}

<span class="cls1">test</span>
<span class="cls1">test</span>
<span class="cls1">test</span>
<span class="cls1">test</span>
<span class="cls1">test</span>
<span class="cls1">test</span>
<span class="cls1">test</span>

elem.classList.toggle不适用于所有元素

1 个答案: