2

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

A.com
  • 1,466
  • 4
  • 19
  • 31
  • This might help you understanding the concept: [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList#A_sometimes-live_collection) – emerson.marini Jun 07 '16 at 12:14
  • Extracted from the link above: _In some cases, the NodeList is a live collection, which means that changes in the DOM are reflected in the collection._ and _In other cases, the NodeList is a static collection, meaning any subsequent change in the DOM does not affect the content of the collection._ – emerson.marini Jun 07 '16 at 12:15
  • From what I understood, it all falls down to the method you query (obtain) the collection. Some methods return a `live collection` whereas others return a `static list`. – emerson.marini Jun 07 '16 at 12:16
  • Another related link: [What's the difference between queryAll and querySelectorAll](http://stackoverflow.com/questions/23269785/whats-the-difference-between-queryall-and-queryselectorall) – emerson.marini Jun 07 '16 at 12:19

1 Answers1

1

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.

emerson.marini
  • 9,331
  • 2
  • 29
  • 46
  • ahhh, so it is a "direct value vs reference value" situation. That makes sense. Thanks for all of the research. – A.com Jun 07 '16 at 12:30