Menu
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.
317
A "live" collection in JavaScript is a collection of DOM elements where changes to DOM are reflected in the collection object (such as when a new element is added or an existing one is removed or updated).
From MDN for NodeList: In some cases, the NodeList is a live collection, which means that changes in the DOM are reflected in the collection. For example, Node.childNodes is live: var parent = document. getElementById('parent'); var child_nodes = parent. childNodes; console.
An HTMLCollection is a collection of document elements. A NodeList is a collection of document nodes (element nodes, attribute nodes, and text nodes). HTMLCollection items can be accessed by their name, id, or index number. NodeList items can only be accessed by their index number.
The querySelectorAll() method does not return a live list of elements. This means the list created from querySelectorAll() is a snapshot of the document at the time it was created and does not reflect the document as it changes. The list is static, not live.
These
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 computed 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.
160
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 complex 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 complex selectors would need to be recalculated lots of times, and that would be so expensive.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
