title: Javascript: access DOM elements without getElementById
body: <p>Below is some sample code. </p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper" class="access"&gt;
          &lt;form id="test"&gt;
              &lt;input id="password"&gt;&lt;/input&gt;
              &lt;input type="submit"&gt;&lt;/input&gt;
          &lt;/form&gt;  
      &lt;/div&gt;
      &lt;script&gt;
          console.log(password);
          alert(wrapper.className);
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The console log returns the DOM element with id <code>password</code>. The alert is "alert". </p>
  
  <p>It works in normal code as well, e.g. <code>var x = wrapper.className;</code> </p>
  
  <p>Surely this is not right? What is the point of <code>document.getElementById</code>, <code>$('#password')</code> or <code>goog.dom.getElement</code> if it just works like this? Are these functions just for legacy now? </p>
  
  <p>It works in Firefox, Chrome and Safari, incidentally.</p>