JavaScript HtmlCollection loop never returns second element

Question

i know there are answers on how to access and iterate over a HtmlCollection, but it just doesn\'t work for me here:
I got some elements with the class \"tabSheetActive\", t

Answer 1

getElementsByClassName returns a live HTMLCollection.

This line:

activeTabSheet.className.replace('tabSheetActive', 'tabSheet');

Stops the first item in the list from being a member of the class. Consequently it is removed and everything else is shuffled down (so the element that was at index 1 moves to index 0).

---

To deal with this you can:

• Use querySelectorAll which returns a non-live NodeList
• Loop over the HTMLCollection backwards
• Use a while loop, test the length of the HTMLCollection, and always modify index 0.
• Copy all the values into an array before looping over that