title: Accessing elements with IDs via their global variables
body: <p>It is a not-so-widely-known fact that most* web browsers create a global variable for every element on a page with an <code>id</code> attribute:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header id="page-header"&gt;&lt;/header&gt;
  </code></pre>
  
  <p><br>
  JS:</p>
  
  <pre><code>window['page-header'].style.fontFamily = "Comic Sans MS";
  </code></pre>
  
  <p><br>
  My Questions: </p>
  
  <ul>
  <li>Is this a reliable way to select elements?</li>
  <li>Any reason to use <code>document.getElementByID</code> instead? I would guess that accessing ID'd elements with their global variables would be faster than <code>document.getElementByID</code>.</li>
  </ul>
  
  <p><br>
  <a href="http://jsbin.com/eponug/1/quiet" rel="nofollow">Here</a> is a demo.
  <br>*I've tested this in the latest versions of Chrome, Firefox, and IE.</p>