Цикл JavaScript HtmlCollection никогда не возвращает второй элемент

Question

Я знаю, что есть ответы на то, как получить доступ к HtmlCollection и выполнить итерацию, но у меня это просто не работает:
Я получил некоторые элементы с классом "tabSheetActive", количество их может быть 1 или больше.
Я получаю к ним доступ с помощью:

var activeTabSheets = document.getElementsByClassName('tabSheetActive');
console.log('Active sheets amount: ' + activeTabSheets.length); // outputs 2

Регистрация коллекции выводит следующее:

[div.tabSheetActive.sheet_512_0, div.tabSheetActive.sheet_512_0]

После этого я пытаюсь перебрать их и манипулировать их классами следующим образом:

for (var i = 0; i < activeTabSheets.length; i++) { // just iterates one time
    var activeTabSheet = activeTabSheets[i];
    console.log("Index: " + i); // outputs 0 
    console.log(activeTabSheet); // outputs first element
    var newClassName = activeTabSheet.className.replace('tabSheetActive', 'tabSheet');
    activeTabSheet.className = newClassName;
}

Трюки с [].forEach.call(activeTabSheets, function(activeTabSheet) { //code here }); не работать ни для меня. Это просто повторяется один раз.
Должно быть, это что-то действительно глупое, но я часами отлаживал и рвал на себе волосы.

Answer 1

getElementsByClassName возвращает живой HTMLCollection.

Эта строка:

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

Останавливает, чтобы первый элемент в списке был членом класса. Следовательно, он удаляется, а все остальное перемешивается (поэтому элемент с индексом 1 перемещается на индекс 0).

---

Чтобы справиться с этим вы можете:

• использование querySelectorAll который возвращает неживой NodeList
• Зациклить HTMLCollection в обратном направлении
• Использовать while цикл, проверить длину коллекции HTMLC и всегда изменять индекс 0,
• Скопируйте все значения в массив перед циклом