Unexpected childNodes behavior

StackOverflow https://stackoverflow.com/questions/13941157

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!

Was it helpful?

Solution 2

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.

OTHER TIPS

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];

@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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top