Great question—this is a super common gotcha when working with DOM traversal, so let's break it down clearly:

First: What does "live" mean? #

Yep, you nailed it! A live DOM collection means it automatically updates whenever the underlying DOM structure changes. You don't need to re-run the query to get the latest state. For example:

• If you store const kids = parent.childNodes in a variable
• Then you add a new <span> to parent
• The kids collection will already include that new <span> without you having to call parent.childNodes again

Both children and childNodes are read-only and live, as you noted.

Core Conceptual Differences Between children and childNodes #

The biggest gap is what types of nodes each collection includes:

• children: Only contains Element nodes—these are the actual HTML tags you write (like <div>, <p>, <img>, etc.). It ignores all other node types entirely.
• childNodes: Contains every single node that's a direct child of the parent, regardless of type. That includes:
  • Element nodes
  • Text nodes (even empty ones from spaces/newlines in your HTML)
  • Comment nodes (<!-- ... -->)
  • Processing instruction nodes (rare in modern HTML, but still counted)

Quick Example to Illustrate #

Take this HTML snippet:

<div id="myParent">
  <h1>Hi there</h1>
  <!-- A hidden comment -->
</div>

If you run these lines:

const parent = document.getElementById('myParent');
console.log(parent.children.length); // Output: 1 (only the <h1> element)
console.log(parent.childNodes.length); // Output: 5 (newline text node, <h1>, newline text node, comment node, newline text node)

That's the difference in action—childNodes counts all the "invisible" nodes that come from whitespace in your HTML, while children only cares about actual elements.

One minor side note: children returns an HTMLCollection, while childNodes returns a NodeList, but that's mostly an implementation detail compared to the core node type difference.

内容的提问来源于stack exchange，提问作者Brannon Teeer