Что такое живая коллекция DOM?

Question

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

YeaHub · Accepted Answer

Живая коллекция DOM — это тип коллекции, который автоматически обновляется при изменении структуры DOM. Это означает, что если вы измените HTML-документ (добавите или удалите элементы), живая коллекция будет отражать эти изменения без необходимости повторного запроса элементов.Примеры живых коллекций:document.getElementsByTagName(): Возвращает живую коллекцию всех элементов с указанным тегом.document.getElementsByClassName(): Возвращает живую коллекцию всех элементов с указанным классом.Пример использования:const listItems = document.getElementsByTagName('li'); 
console.log(listItems.length); // Предположим, 3 
// Добавляем новый элемент списка 
const newItem = document.createElement('li'); 
newItem.textContent = 'New Item'; 
document.querySelector('ul').appendChild(newItem); 
console.log(listItems.length); // Теперь будет 4Статические коллекции:В отличие от живых коллекций, статические коллекции не обновляются автоматически. Например, document.querySelectorAll() возвращает статическую коллекцию, которая содержит элементы на момент вызова метода, и любые изменения в DOM не повлияют на эту коллекцию.const staticItems = document.querySelectorAll('li'); 
console.log(staticItems.length); // Предположим, 3 
// Добавляем новый элемент списка 
const newItem = document.createElement('li'); 
newItem.textContent = 'New Item'; 
document.querySelector('ul').appendChild(newItem); 
console.log(staticItems.length); // Все еще будет 3Таким образом, живая коллекция DOM может быть удобной при работе с динамическими изменениями страницы, но разработчики должны быть осторожны, чтобы не столкнуться с неожиданными результатами при манипуляции с элементами.