title: Nodes in JavaScript
body: <p>I'm learning JavaScript and I've got a question for you guys. The thing is that I'm trying to wrap my head around some event handlers, but while doing so I've come to realize that there is something that I don't understand about nodes.</p>
  
  <p>I have <a href="http://jsfiddle.net/ljnissen/ett4vs73/" rel="nofollow">this code</a> that works fine when I use jQuery:</p>
  
  <pre><code>var canvas = $('#cvs');
  
  canvas.mousemove(function(e){
       var pageCrds = '('+ e.pageX +', ' + e.pageY +')';
  
       var b = document.getElementById("first");
       b.firstChild.nodeValue = "(e.pageX, e.pageY) - "+ pageCrds;   
  });
  </code></pre>
  
  <p>but <a href="http://jsfiddle.net/ljnissen/ha6rcwjs/" rel="nofollow">this code</a> is not working: </p>
  
  <pre><code>var canvas = document.getElementById('cvs');
  
  canvas.mousemove(function(e){
      var pageCrds = '('+ e.pageX +', ' + e.pageY +')';
  
      var b = document.getElementById("first");
      b.firstChild.nodeValue = "(e.pageX, e.pageY) - "+ pageCrds;   
  });
  </code></pre>
  
  <p>The HTML that I am using is the same in both cases:</p>
  
  <pre><code> &lt;canvas id="cvs" width="150" height="150"&gt;&lt;/canvas&gt;
      &lt;div id="first"&gt;Move mouse over canvas.&lt;/div&gt;
         &lt;p id="one"&gt;&lt;/p&gt;    
         &lt;p id="two"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Can anybody shed some light as to why the jQuery-version works and not the one in pure JavaScript? Obviously, I would like to be able to do my task in pure JavaScript as well as in jQuery.</p>