Комментарии 16
Странно конечно вводить понятие живые/неживые коллекции, когда DOM API просто возвращает либо каждый раз новый объект (querySelectorAll), либо вы берёте ссылку на один и тот же объект (element.children).
Разумеется при добавлении/удалении дочернего элемента в element.children ваша коллекция изменится, ведь это ровно тот же самый объект:)
Справедливости ради, я могу легко представить API, в котором свойство children будет возвращать новую неизменяемую коллекцию при каждом обращении. Так что информация о том, что children привязана к дереву узлов и отражает изменения в нём — важна.
Хотя, конечно, автор выбрал странный способ для демонстрации этого.
children никуда не привязана — она и есть часть дерева.
Как минимум, эта коллекция связана со свойствами firstChild, lastChild, nextSibling, previousSibling — нет способа изменить эти свойства не затронув некоторые коллекции children.
И да, я легко могу представить другой мир, где свойство children реализовано вот так:
get children() {
let result = [];
for (let node = this.firstChild; node; node = node.nextSibling) {
result.push(node);
}
return result;
}Информация о том, что мы не живём в этом другом мире — полезная.
Однако, есть описание и стандарт на DOM где указано, что там и как возвращается и как должно интерпретироваться.
А в вашей вселенной это будет другое описание и стандарт.
И чтобы не порождать всякую магию — достаточно чуть-чуть знать стандарт, с объектами и свойствами которого ты работаешь. И тогда не будет живых/мертвых/дохлых коллекций, а будет четкое представление, что это.
Ну самое забавное — видеть эту дичь в блоге HTML-academy.
Ну разумеется, для того стандарт и нужен.
Кстати, как быстро вы сможете найти в стандарте подтверждение того, что коллекция children — живая? Я вот аж 8 минут искал.
А зачем, собственно? И так понятно, что речь идёт об актуальных данных
Node.children
Свойство
childrenParentNodeявляется свойством только для чтения, которое возвращаетHTMLCollection, содержащее все дочерниеelementsузла, на котором он был вызван.
https://developer.mozilla.org/ru/docs/orphaned/Web/API/ParentNode/children
Нет, не понятно. Ваша цитата никак не запрещает лежать там снимку актуальных данных, и воспитанный в функциональной парадигме программист запросто может именно так и подумать. Это во-первых.
А во-вторых, оппонент выше заявлял, что знания стандарта достаточно. Поэтому мне и интересно, насколько быстро опытный фронтендер может найти нужную информацию именно в стандарте, а не во вторичном источнике вроде MDN.
Меня очень сильно сбила с толку эта статья, пока я не сообразил, что это просто терминологическая путаница.
"Живая коллекция" - это просто ссылка на метод объекта, а "неживая" - собственно, коллекция, данные.
Давайте ещё введём термин undead collection или, скажем, вымороченная коллекция - коллекция данных объекта, который был уже уничтожен.
Зачем так путать людей, не пойму.
P.S. как же бесит новый редактор на мобильном -- ужас! Его вообще тестировали? /offtop
Тем не менее, такой термин реально существует.
Вот цитата из MDN:
The read-only children property returns a live HTMLCollection which contains all of the child elements of the element upon which it was called.
И вот цитата из стандарта:
A collection is an object that represents a list of nodes. A collection can be either live or static. Unless otherwise stated, a collection must be live.
A collection is an object that represents a list of nodes. A collection can be either live or static. Unless otherwise stated, a collection must be live.
If a collection is live, then the attributes and methods on that object must operate on the actual underlying data, not a snapshot of the data.
Почему-то здесь в двух абзацах всё предельно понятно и вопросов даже не возникает.
Какие живые / неживые?
В случае с обращением к DOM вы берете ссылку на коллекцию, естественно внутри нее все меняется в зависимости от состояния самой коллекции.
А querySelectorAll возвращает каждый раз новую коллекцию с DOM элементами внутри. Это другое состояние. Грубо говоря это список того, что вы запросили, и он, естественно, никак не связан с DOM, хотя его элементы — связаны.
Вот так из-за незнания и появляется магия...
Которая затем несется в массы.
Живые и неживые коллекции в JavaScript