title: Directly reference HTML elements
body: <blockquote>
  <p><strong>Possible Duplicate:</strong><br />
  <a href="https://stackoverflow.com/questions/3434278/ie-chrome-are-dom-tree-elements-global-variables-here">IE/Chrome: are DOM tree elements global variables here?</a><br />
  <a href="https://stackoverflow.com/questions/6994139/why-windowid-document-getelementbyid-id">why window[id] === document.getElementById( id )</a></p>
  </blockquote>
  
  <p>I've just come across something in html/javascript which has surprised me a bit. When obtaining a reference to an html element, using javascript, I have always previously used either <strong>jQuery</strong> or <code>document.getElementById</code>. It also appears that you can directly access a element simply by using it's <code>id</code>. Can someone explain the nuances of this? I've googled but cannot find any reference to this ability, every site talks about <code>getElementById</code>.</p>
  <p>The following page snippet illustrates this.</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt; 
  &lt;body&gt;
      &lt;input type=&quot;button&quot; value=&quot;getElement&quot; onclick=&quot;document.getElementById('blah').innerText = 'getElementById'&quot; /&gt;
      &lt;input type=&quot;button&quot; value=&quot;direct&quot; onclick=&quot;blah.innerText = 'direct';&quot; /&gt;
      &lt;div id=&quot;blah&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Many thanks in advance.</p>