Question

There is HTML page with contents like this.

Documentation at MDN says that childNodes returns a collection of child nodes of the given element which is a NodeList.

So, according to the doc, the first child for the NodeList should be <h1>PyCon Video Archive</h1>.

But, in Developer Tools (Chromium), it says the other way.

![enter image description here][2]

So, why exactly the first node is not <h1>PyCon Video Archive</h1>?
Why a text object as first element?

I would appreciate some help here.

EDIT

So, I just figured out that in Firebug (FF), the same function behaves differently.

My new question: Is using .childNodes() an unreliable way of accessing DOM elements?

Answer 1

To get the first element child, you can use…

document.body.firstElementChild;

…but older brwosers don’t support it.

---

A method that has greater support is the children collection…

document.body.children[0];

…which has pretty good support but still has some holes in terms of older browsers.

(Just double checked, and as long as you don’t support Firefox 3, and as long as you don’t include HTML code comments in the markup, using .children will be safe.)

---

To ensure that you have the widest browser support, create a function…

function firstElementChild( parent ) {

    var el = parent.firstChild;
    while( el && el.nodeType !== 1 )
        el = el.nextSibling;

    return el;
}

and use it like this…

var h1 = firstElementChild( document.body );