What is the Difference Between children and childNodes?

#parentnode #javascript #beginners #childnodes

What’s the difference between the ParentNode.children and Node.childNodes properties of an element?



var elem = document.querySelector('#my-element');

elem.children;

elem.childNodes;

children

-> each element has that property,
-> is provided by Element class (that class implements Node interface),
-> contains only child elements (it has HTMLCollection type).
Hint: elements are:

, , , , , , etc.

childNodes

-> each node and each element have that property,
-> is provided by Node interface,
-> contains all child nodes (it has NodeList type),
Hint: nodes are: elements, texts and comments.