How can I know what is the difference between live and not live collection.
According to my research:
A live is: when the changes in the DOM are reflected in the collection. The content suffers the change when a node is modified.
A Not Live is : when any change in the DOM does not affect the content of the collection.
document.getElementsByClassName() is an HTMLCollection, and is live.
document.getElementsByTagName() is an HTMLCollection, and is live.
document.getElementsByName() is a NodeList and is live.
document.querySelectorAll() is a NodeList and is not live.
Why document.querySelectorAll is not live?
I know that :
HTMLCollection only contains Elements Nodes NodeList contains Element Nodes and Text Nodes.
How can I know what is the difference between live and not live collection.
According to my research:
A live is: when the changes in the DOM are reflected in the collection. The content suffers the change when a node is modified.
A Not Live is : when any change in the DOM does not affect the content of the collection.
document.getElementsByClassName() is an HTMLCollection, and is live.
document.getElementsByTagName() is an HTMLCollection, and is live.
document.getElementsByName() is a NodeList and is live.
document.querySelectorAll() is a NodeList and is not live.
Why document.querySelectorAll is not live?
I know that :
HTMLCollection only contains Elements Nodes NodeList contains Element Nodes and Text Nodes.
Share Improve this question edited Sep 9, 2015 at 17:52 m4n0 32.3k28 gold badges80 silver badges96 bronze badges asked Sep 9, 2015 at 17:50 floorfloor 2112 silver badges6 bronze badges 1- nczonline/blog/2010/09/28/… – Joseph Commented Sep 9, 2015 at 18:06
2 Answers
Reset to default 13These
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()
are live because they are observers of internal collections maintained by engines. That maintenance is not strictly required but is easy to achieve.
document.querySelectorAll()
is not live because result gets puted each time you request it.
Maintenance of live collection is too expensive as each modification (content, attributes, classes) of the DOM in this case will require re-evaluation of each element in the collection - O(N*M) task where N is the number of all elements in the DOM (worst case) and M number of active querySelectorAll() collections.
From the DOM spec
A collection is an object that represents a lists of DOM 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.
When a collection is created, a filter and a root are associated with it.
The collection then represents a view of the subtree rooted at the collection's root, containing only nodes that match the given filter. The view is linear. In the absence of specific requirements to the contrary, the nodes within the collection must be sorted in tree order.
The reasoning to make the querySelectorAll return a static NodeList may be to be able to allow more plex selectors.
For example, Selectors L4 may introduce things like the :has() pseudo-class. Probably, since it can't be implemented in a reasonable performance, it will only be available in querySelectorAll but not in stylesheets.
If the collection returned by querySelectorAll was live, then those plex selectors would need to be recalculated lots of times, and that would be so expensive.