title: Variables assigned to document.getElementById accessable outside of closure?
body: <p>Lets say I have a few variables in a closure like so:  </p>
  
  <pre><code>(function () {  
      var foo = document.getElementById('foo'),  
          bar = 'baz';  
   }());
  </code></pre>
  
  <p>Also assume I have an html element with an id of foo : </p>
  
  <pre><code>&lt;h1 id = 'foo'&gt;foo&lt;/h1&gt;
  </code></pre>
  
  <p>I then try to access each of the variables in the closure from outside the closure.<br>
  First bar :</p>
  
  <pre><code>console.log(bar); //logs a reference error 'bar is not defined'
  </code></pre>
  
  <p>Then foo :  </p>
  
  <pre><code>console.log(foo.innerHTML) // logs 'foo' instead of throwing reference error. Why?
  </code></pre>
  
  <p>Why is it that foo is still accessible outside of the closure?</p>
  
  <p>hear is a jsFiddle if that helps : <a href="http://jsfiddle.net/YmDmL/" rel="nofollow">http://jsfiddle.net/YmDmL/</a></p>