getElementById returning null but returns DOM node with $("")

Question

I have the following lines in my .js file canvas.js in my RoR /assets/javascripts/ directory.

var b_canvas = document.getElementById("prof_canvas");
console.log(b_canvas);

Which when executed in my browser's console returns.

null

But when I write the following in the Console:

$("#prof_canvas")

I get back the <canvas> object.

Here is the HTML upon which the JS operates:

 <canvas id='prof_canvas' style='width:400px;height:300px '></canvas>

Timing matters. It means the the corresponding jQuery snippet is executed when the element is added to DOM. — Ram, Jun 22 '15 at 21:10
Use `window.onload` to execute the same line JS, and see what are the results. — Arslan Ali, Jun 22 '15 at 21:13
@Thalatta Please check [this question](http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the). — Ram, Jun 22 '15 at 21:15

Dalorzo · Accepted Answer · 2015-06-22T21:15:07.087

jQuery:

$("#prof_canvas")

Is actually mirror of querySelector:

var element = document.querySelector("#prof_canvas");

And better is to add an script like this at the end of your HTML or code the event when DOM is ready:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

1 Answers1