What is the difference between children and childNodes?

Question

Conceptually what is the difference?

MDN - childNodes

MDN - children

They both appear to be read-only and live. What does live mean? Is it the seemingly obvious that if the DOM updates so will your childNodes or children object ?

How are they different, conceptually.

Answer 1

• children returns only those nodes that are elements.
• childNodes returns all nodes (elements, attributes, text, comment, etc.).

In the Document Object Model, everything is represented as a "node" in a "tree" of nodes. Nodes are differentiated by their type. Elements, comments, raw text, attributes, the doctype are all parts or "nodes" in the document.

But, elements are only those nodes which are defined by a "tag". In other words, an element node is just one type of node. This is often a big deal because in the DOM, everything is a node, but often, you are only interested in element nodes.

In the following example, we'll count up how many nodes there are and then how many just element nodes there are:

console.log("Total child nodes: " + document.getElementById("parent").childNodes.length); // The comment, text and element nodes
console.log("Just child elements: " + document.getElementById("parent").children.length);   // Just the nested <div>

<div id="parent">
  <!-- This is a comment node -->
  Every line of raw text
  is also a node.
  <div>Nested div text</div>
</div>

From MDN on childNodes:

The Node.childNodes read-only property returns a live NodeList of child nodes of the given element where the first child node is assigned index 0.

From MDN on children:

The Parent.Node property children is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called.

---

LIVE NODE LISTS:

A "live" node list is one that always references the most up to date matches so you can always be sure all relevant nodes have been added to the collection. This is beneficial when new nodes that match a query you've already made are added dynamically after you've made your query. You must be careful with these types of queries though because the way they keep the collection up to date is by re-scanning the DOM every time you interact with the collection, which can be very wasteful in terms of performance. Only use live node lists when you know you will be dynamically added nodes in the future and you want those nodes included in a collection created at a prior time.

Here's an example:

let tests = document.getElementsByClassName("test");  // Document is not scanned here

console.log("Count of elements that have the \"test\" class: " + tests.length); // Document is scanned again here

// dynamically crate new element that belongs in the node list already defined
let newTest = document.createElement("p");
newTest.classList.add("test");
newTest.textContent = "Dynamically created element";
document.body.appendChild(newTest);

console.log("Count of elements that have the \"test\" class: " + tests.length); // Document is scanned here

<div class="test">Statically created element</div>

You will get a live node list when you query the document using any of these methods:

• .getElementsByName()
• .getElementsByTagName()
• .getElementsByClassName()

STATIC NODE LISTS:

A static node list is one that queries the document for matching nodes just once, at the time that the query is made. If new nodes get dynamically added later, they are not included in the collection. While this is more limiting than live node lists, it is also much more efficient and much more commonly used.

.querySelectorAll() produces a static node list.

Answer 2

Each returns a collection, but they are collections of different objects.

Live means that the collections will grow and shrink as HTMLElements or Nodes are added and/or removed even after the collection is created.

They only differ in the methods and properties available on each item of the collection. This is not conceptual, but API difference.