Живые и неживые коллекции в JS – что это?

Содержание

  1. 1. Разница между живыми и неживыми коллекциями
  2. 2. Другие способы получить коллекцию
  3. 3. Как использовать живые и неживые коллекции в JS
Нужна верстка сайта на HTML?
Эксперты Ворк24 помогут!
Желаете стать фрилансером и работать удаленно?
Регистрируйтесь на Ворк24

Живые и неживые коллекции в JS — что это_.png

JavaScript, являясь одним из самых популярных языков программирования для веб-разработки, предоставляет разработчикам множество инструментов для взаимодействия с HTML-документами.

Среди них особое место занимают живые и неживые коллекции. В данной статье мы разберем, что они представляют из себя, каковы их отличия и как использовать их в JavaScript.

Разница между живыми и неживыми коллекциями

Оба типа предоставляют разработчикам инструменты для работы с элементами HTML-документа, но их поведение при изменении его структуры существенно отличается.

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

После этого список не изменяется, даже если в дальнейшем изменится содержимое HTML-документа. Например, при использовании метода querySelectorAll создается неживая коллекция:

Неживые коллекции.png

Если в дальнейшем добавить или удалить элементы div из документа, nonLiveCollection останется неизменным, не отражая внесенных изменений.

Живые, наоборот, динамически обновляются, отражая текущее состояние документа. Это особенно заметно при использовании методов, таких как getElementsByTagName:

Живые коллекции.png

В данном случае liveCollection автоматически подстраивается под изменения в документе, будь то добавление новых div или их удаление.

Пример сравнения:

Пример сравнения.png

Все эти особенности важны при выборе между живыми и неживыми коллекциями в зависимости от конкретных требований при разработке веб-приложений на JavaScript. Учитывая эти различия, разработчики могут эффективнее использовать инструменты DOM.

Другие способы получить коллекцию

getElementsByTagName(tag)

Возвращает живую коллекцию элементов с указанным тегом. Пример использования:

Другой способ 1.png

getElementsByClassName(className)

Возвращает ее же с указанным классом.

Другой способ 2.png

getElementsByName(name)

Возвращает живые элементы с указанным атрибутом name.

Другой способ 3.png

Как использовать живые и неживые коллекции в JS

Если необходимо динамически реагировать на изменения в структуре документа, первые предпочтительны. В противном случае, эффективнее могут быть вторые.

Как использовать.png

Понимание разницы между живыми и неживыми коллекциями важно при выборе метода доступа к элементам документа. А выбор между ними зависит от конкретной задачи.

Ищите фриланс-биржу для работы или планируете заказать верстку сайта по макету?

Комментарии
1

Спасибо за инфу

Не можешь разобраться в этой теме?
Обратись за помощью к фрилансерам
Гарантированные бесплатные доработки
Быстрое выполнение от 1 дня
Безопасная сделка
Прямой эфир