Как сделать перебор NodeList?

Question

[Илья Колпаков]

После нажатия на кнопку класс меняется у 1, 3, 5-ого элементов. После второго нажатия добавляются 2 и 6. После третьего только меняется элемент под номером 4. Почему не меняются все элементы по первому нажатию?

JS:

var bn = document.getElementById("button1");
	bn.addEventListener("click",changeColor);

	var str = document.getElementsByClassName('test');
	console.log(str);

	function changeColor(){
	for(var i=0;i<str.length;i+=1){
	   str[i].className=("color1");}
	}

HTML:

<div class="test">
			<p>change my color1</p>
		</div>
		<div class="test">
			<p>change my color2</p>
		</div>
		<div class="test">
			<p>change my color3</p>
		</div>
		<div class="test">
			<p>change my color4</p>
		</div>
		<div class="test">
			<p>change my color5</p>
		</div>
		<div class="test">
			<p>change my color6</p>
		</div>

Answer 1

[Александр]

let btn = document.querySelector('#button1');
let elements = document.querySelectorAll('.test');

btn.addEventListener('click', changeColor);

function changeColor() {
	for (let element of elements) {
		elements.classList.toggle('color1');
	}
}

Comments

[Илья Колпаков]

Спасибо!
Хотел бы узнать почему мой перебор через цикл for работал так странно

[Александр]

kivinus1, Видимо потому, что Вы перезаписывали класс. И, в данном случае, HTMLCollection убирал элемент из массива. Чтобы этого избежать, можно было превратить HTMLCollection в массив так:

Array.from(document.getElementsByClassName('test'));

или так
[...document.getElementsByClassName('test'))];

[Илья Колпаков]

Благодарю за ответ

Answer 2

[Антон Антон]

getElementsBy* возвращает динамическую коллекцию, поиск происходит каждый раз при обращении к её своствам. Поскольку сама коллекция изменяется при назначении класса (пропадает первый элемент), то приувеличении i обработка идет через один.
Нужно либо не изменять i: https://jsfiddle.net/07br1g2j/ или воспользоваться циклом while https://jsfiddle.net/07br1g2j/1/
либо добавлять класс вместо переписывания: https://jsfiddle.net/534pn0by/10/
либо преобразовать nodelist в массив перед обработкой https://jsfiddle.net/534pn0by/11/
либо воспользоваться методом, который возвращает "статическую коллекцию" https://jsfiddle.net/xrypz7v1/

Comments

[Илья Колпаков]

Теперь понятно, спасибо

[Пашенька]

непонятно почему (в мануалах не нашел), при изменении класса из исходного nodelist пропадает тот элемент, который получен при поиске по классу

Потому что getElementsByClassName возвращает живую коллекцию.

[Антон Антон]

Пашенька, А есть ссылка на мануал? а то в MDN по диагонали не нашел

[Пашенька]

Антон Антон, конечено – поиск по DOM изнутри

[Антон Антон]

Получается, поиск происходит при каждом обращении или обновлении DOM, и для сохранения производительности в принципе нужно каждый раз перегружать результат в массив.

[Антон Антон]

Обновил ответ

Answer 3

[Дмитрий]

Потому что возвращается коллекция, из которой динамически удаляются данные когда элемент больше не соответствует выставленному отбору. Зафиксируйте значения в массиве, тогда будет работать.

var str = Array.from(document.getElementsByClassName('test'))

Comments

[Error420]

Мне помогло , спасибо