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
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.