Почему цикл for (forEach) обрабатывает элементы через один?

Question

[Kesantielu]

Столкнулся со странным поведением во время обработки массива элементов DOM в цикле — обрабатываются через один.

var a = document.getElementsByClassName('nahren');
Array.prototype.forEach.call(a, function(e) {
	e.classList.remove('nahren')
})

Пример на JSFiddle

Comments

[l0cked]

var a = document.querySelectorAll('nahren');

[Kesantielu]

l0cked: а в чем проблема с getElementsByClassName?

[Алексей Зуев]

Kesantielu: это живая коллекция

[Алексей Зуев]

https://learn.javascript.ru/searching-elements-int...

[Алексей Зуев]

Алексей Зуев: при удалении класса ты как будто сдвигаешь текущий индекс итерации

[Алексей Зуев]

document.getElementsByClassName('hren') будет работать

[Алексей Зуев]

потому что ты не меняешь эту коллекцию при итерации

[Kesantielu]

Алексей Зуев: спасибо, теперь все ясно

Answer 1

[Алексей]

Потому что удаляя класс по которому вы произвели выборку элементов, тем самым вы удаляете этот элемент из массива выборки, а индекс увеличивается на единицу.
То есть:
первый вызов - индекс = 0, кол-во элементов = 10,обрабатывается 1-й элемент исходного массива;
второй вызов - индекс = 1, кол-во элементов = 9,обрабатывается 3-й элемент исходного массива;
третий вызов - индекс = 2, кол-во элементов = 8,обрабатывается 5-й элемент исходного массива;
четвертый вызов - индекс = 3, кол-во элементов = 7,обрабатывается 7-й элемент исходного массива;
пятый вызов - индекс = 4, кол-во элементов = 6,обрабатывается 9-й элемент исходного массива;

Если сделаете так:

var a = document.getElementsByClassName('hren');
Array.prototype.forEach.call(a, function(e) {
  e.classList.remove('nahren')
})

класс удалится у всех элементов массива

Answer 2

[Александр Толерант]

Перевел html-коллекцию в обычный массив.
Пример подсмотрел решение тут

Answer 3

[Сергей Мельников]

var links = document.querySelectorAll('.class-name')
Array.prototype.slice.call(links).forEach(function(link) {
  link.classList.remove('class-name')
})

Comments

[Константин Громов]

Вы могли бы проверить свой код перед выкладкой. Это занимает 3 минуты и не создаёт дополнительного непонимания.

[Сергей Мельников]

Константин Громов: К сожалению, мне лень)