Проблема с изменением имени класса в JavaScript для IE

Оффтоп javascript
1

У меня возникла странная проблема при работе с JavaScript в Internet Explorer 9. Я пытаюсь изменить имя класса для элементов, но что-то идет не так.

Вот мой код:

var elements = document.getElementsByClassName('ИзменяемоеТекстовоеПоле');
for (var i = 0; i < elements.length; i++) {
    elements[i].className = 'Нулевой';
}

Почему-то этот код меняет className только для некоторых элементов, а не для всех. Но если я меняю значение (value) вместо className, все работает нормально:

var elements = document.getElementsByClassName('ИзменяемоеТекстовоеПоле');
for (var i = 0; i < elements.length; i++) {
    elements[i].value = 'тест';
}

Я нашел обходной путь, используя getElementsByTagName и проверяя className, но так и не понимаю, почему первый вариант не работает. Кто-нибудь может объяснить, в чем проблема? Спасибо!

2

Проблема может быть в том, что getElementsByClassName возвращает живую коллекцию. Когда ты меняешь className, элемент выпадает из коллекции и цикл сбивается. Попробуй перебирать элементы в обратном порядке или использовать querySelectorAll вместо getElementsByClassName. Это должно решить проблему. А вообще, в IE9 лучше использовать jQuery, если есть возможность - меньше головной боли будет.

3

Проблема в живой коллекции, да. Еще вариант - использовать цикл while:

while (elements.length) {
elements[0].className = ‘Нулевой’;
}

Так гарантированно обработаем все элементы. А вообще, для IE9 удобно юзать полифилы типа classlist.js - решают кучу проблем с манипуляцией классами. Сам когда-то намучался с этим, теперь всегда их подключаю для старых браузеров.

4

да, с IE9 вечно какие-то заморочки… я бы посоветовал попробовать сначала сохранить элементы в массив, а потом уже менять им классы. типа так:

var elements = Array.prototype.slice.call(document.getElementsByClassName(‘ИзменяемоеТекстовоеПоле’));
elements.forEach(function(el) {
el.className = ‘Нулевой’;
});

должно сработать нормально. а еще можно попробовать classList.add/remove вместо прямой замены className, иногда это лучше работает в старых браузерах. удачи с этим IE, он тот еще геморрой!