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

Question

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

Answer 1

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.