elem.classList.toggle doesn't apply to all elements

Question

I have some HTML codes like what is below:

<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>

Then I want to use some JavaScript codes to toggle cls1 class of these elements. I typed these lines. The outputs are also below:

> 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

The wrong I think is that document.getElementsByClassName can find all seven elements but elem.classList.toggle only apply to half of them. It is a ridiculous question for me. What's the wrong here?

you need to use a parent element for all your `' elements – Mister Jojo Nov 07 '20 at 12:27 — Mister Jojo, Nov 07 '20 at 12:27

Saadi Toumi Fouad · Accepted Answer · 2020-11-07T12:47:32.920

Use .querySelectorAll() instead, for more infos see this post Get All Elements By ClassName and Change ClassName

From MDN

As always, the returned collection is live, meaning that it always reflects the current state of the DOM tree rooted at the element on which the function was called. As new elements that match names are added to the subtree, they immediately appear in the collection. Similarly, if an existing element that doesn't match names has its set of classes adjusted so that it matches, it immediately appears in the collection.

The opposite is also true; as elements no longer match the set of names, they are immediately removed from the collection.

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 doesn't apply to all elements

1 Answers1