Заменить класс и удалить атрибут у всех на странице

Автор вопроса: Константин

Помогите пожалуйста. На странице товара в интернет магазине могут выводится select с классом "inputbox" и атрибутом size="..." Из-за прописанного в движке магазина класса идет конфликт в стилизации элемента. Нужно заменить класс и удалить атрибут (если есть) у всех таких селектов. Насмотрелся/начитался примеров, но всё не то, а самому "соченить" не выходит...

Этот код работает:
<script>
document.[какая-то функция]('DOMContentLoaded', function(){
    var selects = document.getElementsByTagName('select');
    for (var i = selects.length - 1; i >= 0; --i){
    selects[i].classList.add('uk-select');
    selects[i].removeAttribute('size');
} 
});
</script>

Но при попытке добавить такую же функцию на корректировку input-ов, выдает ошибку. Меняется класс у последнего на страницу input и все. атрибут не удаляет и к следующему input не переходит. Что не так?

document.addEventListener('DOMContentLoaded', function(){
    var selects = document.getElementsByTagName('select');
    for (var i = selects.length - 1; i >= 0; --i){
    selects[i].className='uk-select';
    selects[i].removeAttribute('size');
} 

 var inputs = document.getElementsByClassName('inputbox');
    for (var i = inputs.length - 1; i >= 0; --i){
    inputs[i].className='uk-inputbox';
    inputs[i].removeAttribute('size');
} 
});
</script>

Источник

Ответы (1 шт):

Автор решения: Grundy

Эта функция называется .addEventListener - она позволяет добавлять обработчики событий.

1. Первый параметр - название события
2. Второй - Функция обработчик
3. Третий - настройки.

---

Методы .getElementsBy* возвращают живые коллекции, которые обновляются сразу же, как элемент начинает или перестает соответствовать условию для выборки.

Таким образом, если элементу добавить класс, то он автоматически добавится в коллекцию, полученную с помощью getElementsByClassName, аналогично, в случае удаления - удалится.

Это можно проследить на пример с инпутами:

var inputs = document.getElementsByClassName('inputbox');

for (i = inputs.length - 1; i >= 0; --i){
    inputs[i].className='uk-inputbox';
    inputs[i].removeAttribute('size');
}

1. В коллекции inputs находятся все инпуты с классом inputbox
2. берем inputs[i] и заменяем его класс inputbox на 'uk-inputbox'
3. так как теперь инпут не соответствует выборке (у него нет класса 'inputbox'), он автоматически удалился из коллекции.
4. пробуем обратиться по тому же индексу, но, так как элемент был последним - выходим за границы коллекции.

Для решения достаточно сохранить инпут в переменную:

for (var i = inputs.length - 1; i >= 0; --i){
    var input = inputs[i];
    input.className='uk-inputbox';
    input.removeAttribute('size');
}

Либо поменять местами действия и менять класс перед переходом следующему элементу:

for (var i = inputs.length - 1; i >= 0; --i){
    inputs[i].removeAttribute('size');
    inputs[i].className='uk-inputbox';
}

→ Ссылка

licensed under cc by-sa 3.0 with attribution.