title: What are the drawbacks of accessing DOM elements directly by ID?
body: <p>Today I stumbled upon the possibility to access a DOM element in Javascript simply by its id e.g. like this:</p>
  
  <pre><code>elementid.style.backgroundColor = "blue"
  </code></pre>
  
  <p>I tested with a very short snippet if this works in IE, Firefox and Chrome - and it does.
  Here is the snippet I used:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
  &lt;script&gt;
      function highlight() {
          content.style.backgroundColor = "blue";
          content.style.color = "white";
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="content"&gt;test content&lt;/div&gt;
      &lt;div onclick="highlight()"&gt;highlight content&lt;/div&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>So I wondered in which cases <code>document.getElementById('elementid')</code> should be used (or similar framework replacements like $()) and what are the drawbacks of the direct access.</p>
  
  <p>I was not able to find any useful documentation on this. Everywhere either <code>getElementById</code> or framework methods are used.</p>