What is the difference between children and childNodes in JavaScript?

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 instead. ⁴

---

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

Answer 2

Element.children returns only element children, while Node.childNodes returns all node children. Note that elements are nodes, so both are available on elements.

I believe childNodes is more reliable. For example, MDC (linked above) notes that IE only got children right in IE 9. childNodes provides less room for error by browser implementors.