Не работает цикл for на HTML коллекцию.

152

13 апреля 2019, 13:10

Я только учу JS, поэтому если допустил какую-то элементарную ошибку, которая привела к проблеме, то заранее извините. В общем, у меня есть следующая переменная:

let deleteIcons = document.getElementsByClassName('material-icons');

В ней собраны иконки удаления элемента списка, который я генерирую. Цель - реализовать удаление элемента при клике на иконку. Для того, чтобы повесить обработчик событий и отслеживать клик по каждой иконке, мне нужно сначала перебрать коллекцию, чтобы на каждой итерации добавлять событие. Ну а теперь мы подошли к сути проблемы:

for (let i = 0; i < deleteIcons.length; i++) {
    console.log(deleteIcons[i]);
};

при моей попытке перебрать массив ничего не происходит (консольлогом я просто проверяю работоспособность кода). Вообще ничего, ни ошибки, ни ворнинга, по мнению редактора с консолью девтулс всё нормально. Когда я пытаюсь перебрать что-то другое, то никаких проблем.

let array = [1, 2, 3, 4, 5, 6, 7];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
};

Заранее спасибо за ответы и извините, если проблема тривиальная, а решение очевидно.

Answer 1

getElementsByClassName возвращает живую коллекцию, то есть любое изменение в DOM, сразу отображается в коллекции.

Это значит, что получив коллекцию до того как добавились элементы, после их добавления - в коллекции все равно будут актуальные данные, но перебор коллекции до и после добавления элементов будет отличаться:

var tests = document.getElementsByClassName('test'); 
console.log('tests.length:', tests.length); 
 
tests[0].className = 'without-test'; 
console.log('tests.length:', tests.length);

#container div::after { 
  content: attr(class); 
} 
 
#container div { 
  border: 1px solid red; 
} 
 
#container .test { 
  border: 1px solid green; 
}

<div id="container"> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
</div>