Привет! Пост о коллекциях HTML-элементов. Что такое, почему не массив, она живая или нет, они еще и разные и так далее
📝 Сначала определения: коллекция HTML-элементов - набор элементов веб-страницы, порядок в котором соответствует порядку в DOM.
📝 Бывают живые коллекции и статические - живую можно изменить с помощью js, а статическую нет.
📝 Есть две разных структуры данных
HTMLCollection и NodeList: HTMLCollection - это только HTML-теги, а NodeList- это еще и текст, оставшийся без тега, и, например, комментарий.
📝 HTMLCollection всегда живая, а
NodeList может быть статической, но может быть и живой - в зависимости от того, каким образом она получена
Методы получения элементов
▫️element.querySelector('.card')
- производит поиск внутри element и возвращает первый соответствующий
▫️element.querySelectorAll('.item')
- аналогичен, но возвращает коллекцию элементов, соответстующих селектору. И это статический NodeList.
▫️element.getElementById('user')
- возвращает один элемент с заданным id, следует помнить, что на странице может быть только один элемент с данным id - это уникальный идентификатор
▫️element.getElementsByClassName('text') и element.getElementsByTagName('li')
- оба возвращают HTMLCollection
▫️element.getElementByName('user-name') - крайне редко встречается, но возвращает живой NodeList. Также, живой NodeList вернет свойство childNodes
Почему не массив? - Массив отсортирован по индексам, коллекция не имеет индексов, хотя и итерируется - по порядку добавления в DOM. Коллекцию можно преобразовать в массив, например
const arrLink = Array.from(linksCollection);
Перебрать коллекцию HTMLCollection можно перебрать используя цикл for ... of (не путать с for... in), а NodeList можно также перебрать методом forEach
#dom #collection