Why this DOM traversal is not working?

Question

I wrote a very simple JavaScript script to traverse the DOM of a page. Here's the full page:

<html>
<head>
<title>DOM Traversal</title>

<script>

// Traversing the DOM tree
"use strict";

//var node = document.documentElement; //works
var node = document.body; // does not work

while(node) {
    console.log(node);
    node = node.lastChild;
}

</script>

</head>


<body>

<h1>Sample H1</h1>
<div id="text">
    <p>Sample paragraph</p>
</div>

</body>

</html>

As you can see in the comments, when I set node to document.documentElement, the traversal works, but not with document.body. Why is that? I'm on Chrome 35.0.xxxx, by the way.

Wait for the document to load (i.e. when its constituent elements exist) by running this in the onload event — Alex K., Jun 03 '14 at 12:02
Your DOM tree doesn't seem to be loaded when you start traversing. Use `onLoad` event. — VisioN, Jun 03 '14 at 12:02
Add the script at the end of the `
` tag, to ensure the html elements are loaded. — Praveen, Jun 03 '14 at 12:03

score 1 · Accepted Answer · answered Jun 03 '14 at 12:19

try this solution with pure javascript

working fiddle: http://jsfiddle.net/beU8F/3/

// Traversing the DOM tree
function domReady () {
 //var node = document.documentElement; //works
var node = document.body; // does not work

    while(node) {
        console.log(node);
        node = node.lastChild;
    }
}




if ( document.addEventListener ) {
  document.addEventListener( "DOMContentLoaded", function(){
    document.removeEventListener( "DOMContentLoaded", arguments.callee, false);
    domReady();
  }, false );

// If IE event model is used
} else if ( document.attachEvent ) {
  // ensure firing before onload
  document.attachEvent("onreadystatechange", function(){
    if ( document.readyState === "complete" ) {
      document.detachEvent( "onreadystatechange", arguments.callee );
      domReady();
    }
  });
}

score -1 · Answer 2 · edited May 23 '17 at 10:32

-1

'dom' is not ready yet; use jQuery onready like this:

$(document).ready(function() {
    //var node = document.documentElement; //works
    var node = document.body; // does not work

    while(node) {
        console.log(node);
        node = node.lastChild;
    }
});

I assume you can use jQuery. If not you need to find an alternative for jQuery.ready. See this link.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 03 '14 at 12:05

R. Oosterholt

7,720
2
53
77

Although use of jQuery could help the OP with some things, it is not a "universal hammer." – JAAulde Jun 03 '14 at 12:08
I can use jQuery, but wanted the answer for pure JavaScript. – ankush981 Jun 03 '14 at 12:09

score -2 · Answer 3 · answered Jun 03 '14 at 12:06

-2

<html>
<head>
<title>DOM Traversal</title>

<script>
function foo(){
// Traversing the DOM tree
"use strict";

//var node = document.documentElement; //works
var node = document.body; // does not work

while(node) {
    console.log(node);
    node = node.lastChild;
}
}
</script>

</head>


<body onLoad="javascript: foo();">

<h1>Sample H1</h1>
<div id="text">
    <p>Sample paragraph</p>
</div>

</body>

</html>

answered Jun 03 '14 at 12:06

Oom

29
4

Inline event handlers, and the `javascript:` pseudo-protocol are respectively bad and worse practices. – JAAulde Jun 03 '14 at 12:10

Why this DOM traversal is not working?

3 Answers3