A.com A.com - 5 months ago 14
HTML Question

What Does Cody Lindley Mean by "nodes contained in the collection are either literally part of the live document or a snapshot of the live document"?

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


I'm specifically confused about what he means by being "part of the live document or a snapshot of the live document". He doesn't expand on this.

My First Reaction

Is he referring to the ability of a collection to be holding either (1) nodes that still exists in the DOM (i.e. "live") or (2) nodes that no longer exist in the current DOM, such as when you may use a method that removes a node but also returns the node it removed (i.e. a snapshot)?

He never really expands on this so I'm wondering if I missed something earlier in the book, or am just lacking some prerequisite knowledge he assumes the reader should have.

Any help grokking this would be greatly appreciated! thanks.

The full excerpt is below:


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




From Cody Lindley's Dom Enlightenment:
http://domenlightenment.com/

if it helps, further reading:

Nodelist: https://www.w3.org/TR/dom/#nodelist

HTMLcollection: https://www.w3.org/TR/dom/#htmlcollection

Answer

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.querySelectorAll(), Document.querySelect(), etc) you'll get a list of either live or 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 static collection.

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

Comments