Unexpected childNodes behavior

Question

I have some simple HTML and JS code I set up to get a better handle on traversing the DOM.

Here's my HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox</title>
  </head>
  <body>
    <div>
      <h1 id="title">Sandbox</h1>
      <button id="clickMe" onclick="playingAroundWithNodes()">Play with nodes!</button>
    </div>
  </body>
  <script type="text/javascript" src="Sandbox3.js"></script>
</html>

And here's my JavaScript:

function playingAroundWithNodes() {

    //Getting a reference to some nodes!

    var theHtmlNode = document.childNodes[1];
    var theHeadNode = theHtmlNode.childNodes[0];
    var theBodyNode = theHtmlNode.childNodes[1];

    //Let's check out those nodes!

    console.log("theHtmlNode is a " + theHtmlNode.nodeName + " type node.");
    console.log("theHeadNode is a " + theHeadNode.nodeName + " type node.");
    console.log("theBodyNode is a " + theBodyNode.nodeName + " type node.");

}

Here's the console log I get though:

theHtmlNode is a HTML type node.
theHeadNode is a HEAD type node. 
theBodyNode is a #text type node.

What gives? Where the heck is that text node, that's not the title node is it? I'm confused and have played around with it a bunch (and found that the body node is in fact the 3rd child of HEAD according to js, but looking at the HTML that doesn't make sense to me). I could see it being a 3rd descendant or something, but I assumed child meant direct child... Any help appreciated!

lucideer · Answer 1 · 2012-12-18T21:40:43.617

2

Firstly, you've thought me something new. I didn't realise document had a childNodes property at all (Normally the root element (html) is accessed via document.documentElement).

As for text nodes, these will occur dependent on how you format your HTML file. The text node turning up above is probably a return character or a few spaces between the closing </head> and opening <body>.

What you're probably looking for is the (originally non-standard but now recently proposed for standardisation) element.children. John Resig has a good overview.

So if you amend your above code as follows you'll get what you expect:

var theHeadNode = theHtmlNode.children[0];
var theBodyNode = theHtmlNode.children[1];

edited Dec 18 '12 at 21:40

answered Dec 18 '12 at 20:48

lucideer

3,842
25
31

Interesting, there's no whitespace per se there, but when I remove the return and have `` without any spaces/return, I do get the expected `theBodyNode is a BODY type node.` Seeing as this is not easy to read nor a good practice, any advice on how to avoid this or possible workarounds/different formatting options? – mcabrams Dec 18 '12 at 21:05
The "workaround" is to use `theHtmlNode.children[1]` instead of `.childNodes[1]` as mentioned above. Sorry if I didn't go into as much detail in the post - I'll amend. – lucideer Dec 18 '12 at 21:39

score 1 · Accepted Answer · answered Dec 18 '12 at 21:06

IE is the only browser that behaves as you would expect. All other browsers implement the standard and the standard says that whitespace must also be part of the DOM.

Therefore, for HTML that looks like this:

<html>
    <body>
        <div>Hello</div>
    </body>
</html>

IE will create this DOM:

html +
     |____ body +
                |____ div +
                          |____ text("Hello")

But all other browsers will create this DOM

html +
     |____ text("\n    ")
     |
     |____ body +
     |          |____ text("\n        ")
     |          |
     |          |____ div +
     |          |         |____ text("Hello")
     |          |
     |          |____ text("\n        ")
     |
     |____ text("\n    ")

I'm not sure how you got your result because there should be text nodes before and after <html>.

Anyway, the answer is because the standard requires it. So don't blindly use hardcoded index to traverse childNodes because things like minifiers may change the DOM due to whitespace. Either loop through all children and stop once you find the node you want or use getElementsByTagName.

Also, is it possible that my result deviated from what you were expecting (in regard to text nodes before and after ) because text nodes only occur when there is an indentation (rather than just a return)? — mcabrams, Dec 18 '12 at 21:36
The above only applies to IE8 and below. IE9 and 10 do as other browsers do — lucideer, Dec 18 '12 at 21:48

score 0 · Answer 3 · answered Dec 19 '12 at 05:20

0

@mcabrams: In addition to what @slebatman mentioned, if you want to access directly the body name, simply use:

var bodyNode = document.body;  //it returns a refrence to the body node

Hope that helps.

answered Dec 19 '12 at 05:20

SHANK

2,978
23
31

Unexpected childNodes behavior

3 Answers3