Найти несколько DOM-элементов и получить к ним доступ из JavaScript можно разными способами: querySelectorAll
, getElementsByTagName
, children
и так далее. В итоге в каждом случае будет возвращена коллекция — сущность, которая похожа на массив объектов, но при этом им не является, на самом деле это набор DOM-элементов. Стоит учесть, что фактически разные методы возвращают разные коллекции:
HTMLCollection
— коллекция непосредственно HTML-элементов.NodeList
— коллекция узлов, более абстрактное понятие. Например, в DOM-дереве есть не только узлы-элементы, но также текстовые узлы, узлы-комментарии и другие, поэтомуNodeList
может содержать другие типы узлов.
При работе с DOM-элементами в нашем случае тип коллекции значительной роли не играет, поэтому для удобства будем рассматривать их как одну сущность — коллекцию.
Во время работы с коллекциями можно столкнуться с поведением, которое покажется странным, если не знать один нюанс — они бывают живыми (динамическими) и неживыми (статическими). То есть либо реагируют на любое изменение DOM, либо нет. Вид коллекции зависит от способа, с помощью которого она получена. Рассмотрим на примере.
Разница между живыми и неживыми коллекциями
Допустим, в разметке есть список книг:
<ul class="books">
<li class="book book--one"></li>
<li class="book book--two"></li>
<li class="book book--three"></li>
</ul>
Для взаимодействия с книгами получим с помощью JavaScript список всех нужных элементов. Чтобы в дальнейшем увидеть разницу между видами коллекций, используем разные способы поиска элементов — свойство children
и метод querySelectorAll
:
const booksList = document.querySelector('.books');
const liveBooks = booksList.children;
// Выведем все дочерние элементы списка .books
console.log(liveBooks);
const notLiveBooks = document.querySelectorAll('.book');
// Выведем коллекцию, содержащую все элементы с классом book
console.log(notLiveBooks);
Пока никакой разницы не видно. В обоих случаях console.log
выведет одни и те же элементы. Но что, если попробовать удалить из DOM одну из книг?
const booksList = document.querySelector('.books');
const liveBooks = booksList.children;
// Удалим первую книгу
liveBooks[0].remove();
// Получим 2
console.log(liveBooks.length);
// Получим элемент book--two, который теперь стал первым в коллекции
console.log(liveBooks[0]);
const notLiveBooks = document.querySelectorAll('.book');
// Удалим первую книгу
notLiveBooks[0].remove();
// Получим 3
console.log(notLiveBooks.length);
// Получим ссылку на удалённый элемент book--one
console.log(notLiveBooks[0]);
В первом случае информация о количестве элементов внутри коллекции автоматически обновилась после удаления одного элемента из DOM — эта коллекция живая. Во втором случае в переменной notLiveBooks
хранится первоначальное состояние коллекции, которое было актуально на момент вызова метода querySelectorAll
. Эта коллекция неживая, она ничего не знает об изменении DOM. При этом доступна ссылка на удалённый элемент book--one
, которого фактически больше нет в DOM.
Другие способы получить коллекцию
Кроме children
и querySelectorAll
есть другие способы поиска DOM-элементов:
getElementsByTagName(tag)
— находит все элементы с заданным тегом,getElementsByClassName(className)
— находит все элементы с заданным классом,getElementsByName(name)
— находит все элементы с заданным атрибутомname
.
Все эти методы возвращают живые коллекции. Они используются реже, потому что в большинстве случаев удобнее применять querySelectorAll
, но могут встречаться в старом коде.
Как использовать
Для решения большинства задач можно ограничиться неживыми коллекциями. Но если нужно сохранить ссылку на реальное состояние DOM — понадобится живая коллекция. Это удобно в тех случаях, когда программе нужно постоянно манипулировать списком элементов, которые могут регулярно удаляться и добавляться. Хороший пример — задачи в таск-трекере. С помощью живой коллекции можно хранить именно те задачи, которые фактически существуют в данный момент времени.
Структура и некоторые свойства коллекции имеют много общего с массивом. Например, у неё тоже есть свойство length
, и элементы коллекции можно перебирать в цикле for...of
, потому что это перечисляемая сущность. Но, как упоминалось ранее, коллекции не во всём похожи на обычные массивы. С коллекциями не работают такие методы массивов, как push
, splice
и другие. Для их использования нужно преобразовать коллекцию в массив — например, с помощью метода Array.from
:
const booksList = document.querySelector('.books');
const books = booksList.children;
// Выведет обычный массив с элементами из коллекции books
console.log(Array.from(books));
При этом нужно помнить — массив статичен, поэтому при таком преобразовании теряются преимущества живых коллекций.
В HTML Academy есть курсы для опытных разработчиков — по анимациям для фронтендеров, вёрстке email-рассылок и Vue.js. Приходите, чтобы улучшить навыки и узнать много нового о веб-разработке — а там со всеми этими знаниями и до сеньора недалеко.