title: Javascript: GetElementById - when does the DOM hit hit?
body: <p>I'm doing this:</p>
  
  <pre><code>var hpl = doc.getElementById("hpl");
  </code></pre>
  
  <p>and then this:</p>
  
  <pre><code>hpl.style.height = 28 + "px";
  </code></pre>
  
  <p>My question: am I accessing the DOM twice, once to reference the element, and then a second time to set the style height?</p>
  
  <p>If so, then am I right in concluding that this is inefficient with respect to DOM calls, even though it minimises nicely.</p>
  
  <pre><code>var hpl = document.getElementById("hpl");
  if (test === "Abel") {
      hpl.style.height = 28 + "px";
  } else {
      hpl.style.height = 42 + "px";
  }
  </code></pre>
  
  <p>So this would be better in terms of speed:</p>
  
  <pre><code>if (test === "Abel") {
      document.getElementById("hpl").style.height = 28 + "px";
  } else {
      document.getElementById("hpl").style.height = 42 + "px";
  }
  </code></pre>
  
  <p>I've got a jsperf <a href="http://jsperf.com/get-element-by-id-efficiency" rel="nofollow">here</a> which suggests there is no real difference, although I'd like to understand the theory behind this.
  Thanks.</p>