Почему не работает логика этих 2х циклов?

Question

[hryashik]

HTML:
    <div class="container">
        <div class="card">11</div>
        <div class="card">22</div>
        <div class="card">33</div>
        <div class="card">44</div>
        <div class="card">55</div>
    </div>

Суть вопроса: Пытаюсь с помощью цикла поменять значение атрибута "class" у всех элементов.

let array = document.getElementsByClassName('card');   // Сохраняю в переменную сами узлы.
let i;
for (i = 0; i < 5; i++) {
    console.log(array[i]);     // Выводит корректно все узлы по очереди.
    array[i].className = 'style' };  // В результате свойство меняется только у каждого второго элемента, + ко всему вылезает ошибка, что невозможно поменять свойство className.
    Но если я меняю свойство array[i].textContent = "qweqwe"; то работает все прекрасно.

С циклом while:

let i = 0;
while (i < 5) {
    array[i].className = 'style' };  // Свойство изменяется,  но все равно вылезает ошибка, что нельзя поменять свойство.

И да, в цикле while я не указал i++, почему тогда свойство меняется у каждого следующего элемента из массива?

Помогите разобраться с логикой работы интерпретатора...

Answer 1

[Сергей Соколов]

Почему

getElementsByClassName() возвращает «живую» коллекцию. Как только в DOM что-то меняется, коллекция обновляется.

array[i].className = 'style'; заменяет все классы элемента на этот. Т.е. пропадает класс "card", по которому отбирали элементы. Обработанный элемент пропадает из коллекции. Коллекция сокращается, и следующее значение i подхватит элемент через-один от задуманного.

Как быть

Как вариант, делать из живой коллекции обыкновенный замороженный массив:

let array = [...document.getElementsByClassName('card')]; // теперь это просто массив

Ну и если задумка не лишать их класса card, то добавлять класс можно через classList.add(), как уже посоветовали.

Comments

[hryashik]

Благодарю!

[hryashik]

Сергей, а почему метод .querySelectorAll('div.card") работает иначе?
Ведь если мы перезаписываем свойство с помощью .className, то первый элемент массива уходит, следовательно array[1].className перепишет третий элемент узла. Но с .querySelectorAll('div.card') все почему-то работает по другому.
Сам код:

let elements = document.querySelectorAll('div.card');
for (let i = 0; i < elements.length; i++) {
    elements[i].className = 'style';
}

И данный цикл работает без танцев с бубном, хотя изменяется лишь метод сбора самой коллекции узлов. Не понимаю логику в данном случае.

[Сергей Соколов]

hryashik, а вот querySelectorAll() возвращает не «живую», а статичную коллекцию, в отличие от getElementsByClassName().

Answer 2

[xSoal]

array[i].classList.add( 'style')

Comments

[xSoal]

и переменную снаружи обьявлять необязательно )
for (let i = 0; i < 5; i++) {