Home/ Questions/Q 9015113
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T03:40:13+00:00

I have some simple HTML and JS code I set up to get a

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0