Q:

What's the difference between live and not live collection in Javascript selectors?

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. 

A:

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.

