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?
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?
Share Improve this question edited Jan 25, 2012 at 14:15 shadyabhi asked Jan 25, 2012 at 13:21 shadyabhishadyabhi 17.3k28 gold badges85 silver badges134 bronze badges 5- Please don't change the question after you've got answers. By all means edit the question to reflect new information, but changing the question strikes me, while I'm obviously biased, as being disrespectful of posted answers. If you have a new question, ask a new question. – David Thomas Commented Jan 25, 2012 at 14:18
- @DavidThomas It's the same question, just a new development. FF behaves as expected but not Chrome. What's your say on this? – shadyabhi Commented Jan 25, 2012 at 14:21
-
Your questions are different. "So, why exactly the first node is not
<h1>PyCon Video Archive</h1>? Why a text object as first element?" is not the same as "Is using.childNodes()an unreliable way of accessing DOM elements?" – David Thomas Commented Jan 25, 2012 at 14:23 -
1
@shadyabhi: There is no expectation for consoles. They behave however they want, because they're not part of the language. Both browsers are giving you a text node. But they're just showing a different representation of it in their console. The real inpatibility is between older versions of IE, and other browsers. IE will give you the
<h1>, while correct browsers will give you the text node. – user1106925 Commented Jan 25, 2012 at 14:29 - @amnotiam Thanks. I will write greasemonkey scripts and look more into this. Thanks. – shadyabhi Commented Jan 25, 2012 at 14:40
2 Answers
Reset to default 1To 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 ments 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 );
Because there's a white-space text-node before the h1 element. Presumably, in the source (if you view source), the h1 opening tag's been either indented, or moved to a new line within the body (or both) in order for readability. At a guess, I'd imagine that it's something like the following:
<body>
<h1>PyCon Video Archive</h1>
<!-- ...other html... -->
If you revise that to:
<body><h1>PyCon Video Archive</h1><!-- ...other html... -->
Then the first childNode will, indeed, be the h1 element.
It's worth noting that text, even outside of an element tag, is still a child-node of the parent element. Albeit one that can't be easily targeted with a selector.