title: HTML DOM Elements Global Scope
body: <p>When helping someone, I had an interesting situation. They wondered why the code below worked:</p>
  
  <pre><code>&lt;input type="text" id="myElem" value="Nice" /&gt;
  
  $(function() {
      var myElem = $("myElem");
      myProblem();
  });
  
  var myProblem = function() {
      var result = myElem.value; //This Works
      result = myElem.val(); //Doesn't Work
  }
  </code></pre>
  
  <p>At first I didn't have a good answer, because my current thinking is both statements in the myProblem method should fail, but only one failed. Later I learned browsers scope all HTML elements globally.</p>
  
  <p>So explaining how this problem is solved is by myElem will be in scope as a JQuery object within the on load function, however the JQuery object will become out-of-scope when it is inside myProblem method and, because browsers scope all HTML elements globally, myElem will be scoped as a HtmlInputElement.</p>
  
  <p>I have been writing code for awhile, and for me to just learn browsers are scoping all HTML elements globally was news to me.</p>
  
  <p>I understand the code sample and why it works. My question is how early have browsers been doing this? Is this a latest trend or have I missed something? Do all browsers support this?</p>
  
  <p>After some research, I found the latest browsers support, but how about IE6+, etc.</p>
  
  <p>Thank you</p>