Странное поведение при переборе HTMLCollection из getElementsByClassName

Я написал функцию для изменения класса элементов, чтобы изменить их свойства. По какой-то причине изменились только некоторые элементы. Мне понадобилось несколько часов, чтобы найти решение, но мне это показалось странным. Возможно, вы можете объяснить это мне.

Это не работает:

function replace(){
  var elements = document.getElementsByClassName('classOne');

  for (var i = 0; i < elements.length; i++) {
    elements[i].className = 'classTwo';               
  }
}

См. JSFiddle: затрагивается только каждый второй элемент; только каждый второй красный элемент меняет цвет на синий.

Поэтому я изменил окончательное выражение цикла for, чтобы больше не увеличивать i:

function replace(){
  var elements = document.getElementsByClassName('classOne');

  for (var i = 0; i < elements.length; i) { // Heres the difference
    elements[i].className = 'classTwo';               
  }
}

Это хорошо работает! Похоже, что вызывается push и никакого увеличения не требуется. Это нормально? Это отличается от примеров, которые я видел.

Ответы

while (elements.length) {
    elements[0].className = 'classTwo'; // removes elements[0] from elements!
}