I'm not getting this quote:
"A collection [of DOM Nodes] can either be live or static. Meaning that the nodes contained in the collection are either literally part of the live document or a snapshot of the live document."
1.13 Grokking node collections (i.e. Nodelist & HTMLcollection)
When selecting groups of nodes from a tree (cover in chaper 3) or
accessing pre-defined sets of nodes, the nodes are either placed in a
NodeList (e.g. document.querySelectorAll('*')) or HTMLCollection (e.g.
document.scripts). These array like (i.e. not a real Array) object
collections that have the following characteristics.
- A collection can either be live or static. Meaning that the nodes
contained in the collection are either literally part of the live
document or a snapshot of the live document.
- By default nodes are
sorted inside of the collection by tree order. Meaning the order
matches the liner path from tree trunk to branches.
- The collections have a length property that reflects the number of elements in the list
Based on the information I've found - and posted in the comments - I summarize as:
When you query the DOM to retrieve a collection of nodes, depending on the method used (IE:
Document.querySelect(), etc) you'll get a list of either
static nodes, the difference being that changes made to the DOM will be reflected in the nodes already present in a
live collection, whereas the same changes won't affect these same nodes if they're in a
So, if you want a snapshot in that moment in time where you queried the DOM, you should use methods that return a
static collection. This way if the DOM is changed in any way whilst you're working with this collection, nothing will be applied to these elements in your collection. The opposite for the