title: Why Document.querySelector is more efficient than Element.querySelector
body: <p>I did a test with few iterations to test efficiency of <code>Document.querySelector</code> and <code>Element.querySelector</code>.</p>
  
  <p><em>Markup:</em></p>
  
  <pre><code>&lt;form&gt;
    &lt;input type="text" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><em>Script:</em></p>
  
  <p><strong>Querying with</strong> <code>Document.querySelector</code></p>
  
  <pre><code>begin = performance.now();
  
  var 
    i = 0,
    iterations = 999999;
  
  for ( i; i &lt; iterations; i++ ) 
  {
   element = document.querySelector('[type="text"]');
  }
  
  end = performance.now();
  
  firstResult = end - begin;
  </code></pre>
  
  <p><strong>Querying with</strong> <code>Element.querySelector</code></p>
  
  <pre><code>begin = performance.now();
  
  var 
    i = 0,
    iterations = 999999,
    form = document.querySelector('form');
  
  for ( i; i &lt; iterations; i++ ) 
  {
   element = form.querySelector('[type="text"]');
  }
  
  end = performance.now();
  
  secondResult = end - begin;
  </code></pre>
  
  <p><em>Log:</em></p>
  
  <pre><code>console.log( firstResult ); // 703.7450000001118
  
  console.log( secondResult ); // 1088.3349999999627
  </code></pre>
  
  <p>The <em>log</em> is amazing for me because i think that <code>Element.querySelector</code> query only on nodes that is a descendant of the element and <code>Document.querySelector</code> query on all nodes of current document, right?</p>
  
  <p>Why get this result?  </p>