Sounds like you’re overthinking it. You’ve observed the difference between childNodes and children, which is that childNodes contains all nodes, including text nodes consisting entirely of whitespace, while children is a collection of just the child nodes that are elements. That’s really all there is to it.
There is nothing unpredictable about either collection, although there are a couple of issues to be aware of:
- IE <= 8 do not include white space-only text nodes in
childNodeswhile other browsers do - IE <= 8 includes comment nodes within
childrenwhile other browsers only have elements
children, firstElementChild and friends are just conveniences, presenting a filtered view of the DOM restricted to just elements.