Question

I have found myself using JavaScript and I ran across childNodes and children properties. I am wondering what the difference between them is. Also is one preferred to the other?

Answer 1

Understand that .children is a property of an Element. ¹ Only Elements have .children, and these children are all of type Element. ²

However, .childNodes is a property of Node. .childNodes can contain any node. ³

A concrete example would be:

let el = document.createElement("div");
el.textContent = "foo";

el.childNodes.length === 1; // Contains a Text node child.
el.children.length === 0;   // No Element children.

Most of the time, you want to use .children because generally you don’t want to loop over Text or Comment nodes in your DOM manipulation.

If you do want to manipulate Text nodes, you probably want .textContent or .nodeValue instead. ⁴

It’s important to understand the distinction between the 2, before deciding which one to use: The .textContent property represents the text content of the node and its descendants whereas the .nodeValue property represents the value of the current node.

---

<sup>1. Technically, it is an attribute of ParentNode, a mixin included by Element.
2. They are all elements because .children is a HTMLCollection, which can only contain elements.
3. Similarly, .childNodes can hold any node because it is a NodeList.
4. Or .innerText. See the differences here or here.</sup>