Posted By: Anonymous
var elem = document.getElementById('container'); var child = elem.children; var child = elem.firstElementChild; // == children
This works for both cases:
var child = elem.childNodes; // or childNodes, see below
That’s in case of forms, or
<div> iteration. If I might encounter text elements:
var child = elem.childNodes; // treat as NodeList var child = elem.firstChild;
As far as I can work out,
firstChild uses the NodeList from
children. I’m basing this assumption on the MDN reference:
childNodeis a reference to the first child element of the element node, or
nullif there isn’t one.
I’m guessing that, in terms of speed, the difference, if any, will be next to nothing, since
firstElementChild is effectively a reference to
children, and the
children object is already in memory anyway.
What does throw me, is the
childNodes object. I’ve used it to take a look at a form, in a table element. While
children lists all form elements,
childNodes also seems to include whitespace from the HTML code:
<TextNode textContent="n ">
console.log(elem.childNodes); console.log(elem.children); console.log(elem.firstElementChild);
>. How come? I’d understand that one object would allow me to work with the “raw” HTML code, while the other sticks to the DOM, but the
childNodes element seems to work on both levels.
To get back to my initial question, my guess would be: if I want the most comprehensive object,
childNodes is the way to go, but because of its comprehensiveness, it might not be the most predictable in terms of it returning the element I want/expect at any given moment. Cross-browser support might also prove to be a challenge in that case, though I could be wrong.
Could anyone clarify the distinction between the objects at hand? If there is a speed difference, however negligible, I’d like to know, too. If I’m seeing this all wrong, feel free to educate me.
Sounds like you’re overthinking it. You’ve observed the difference between
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
firstElementChild and friends are just conveniences, presenting a filtered view of the DOM restricted to just elements.