Best way to get child nodes
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
childNodes
while other browsers do - IE <= 8 includes comment nodes within
children
while other browsers only have elements
children
, firstElementChild
and friends are just conveniences, presenting a filtered view of the DOM restricted to just elements.
firstElementChild might not be available in IE<9 (only firstChild)
on IE<9 firstChild is the firstElementChild because MS DOM (IE<9) is not storing empty text nodes. But if you do so on other browsers they will return empty text nodes...
my solution
child=(elem.firstElementChild||elem.firstChild)
this will give the firstchild even on IE<9