Get Elements JS vs jQeury

Benchmark created on

Preparation HTML

<h1>HTML Ipsum Presents</h1>
               
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
               
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
        display: block; 
        width: 300px; 
        height: 80px; 
}
</code></pre>

<h1>Level 01 Heading <a href="#">Link</a></h1>
<p>Sed scelerisque sagittis lorem <span class="alt">&amp;</span> phasellus sodales. <a href="http://www.google.com?1">Nulla urna justo, vehicula in</a>, suscipit nec, molestie sed, tellus. Quisque justo. <a href="#1">Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu.</a> </p>

<h2>Level 02 Heading <a href="#">Link</a></h2>
<p><strong>Strong text quisque justo.</strong> Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. <em>Emphasized text duis arcu.</em> Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>

<h3>Level 03 Heading <sup>Superscript</sup> <a href="#">Link</a></h3>
<p>Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>

<h4>Level 04 Heading <a href="#">Link</a></h4>
<p>Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu.</p>

<h5>Level 05 Heading <a href="#">Link</a></h5>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>

<h6>Level 06 Heading <a href="#">Link</a></h6>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo.</p>


<h2>Plain &lt;ul&gt;</h2>
<ul>
        <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>

<h2>Basic Table</h2>
<table>
  <caption>
  Table Caption
  </caption>
  <thead>
        <tr>
          <th>Table head th</th>
          <td>Table head td</td>
        </tr>
  </thead>
  <tfoot>
        <tr>
          <th>Table foot th</th>
          <td>Table foot td</td>
        </tr>
  </tfoot>
  <tbody>
        <tr>
          <th>Table body th</th>
          <td>Table body td</td>
        </tr>
        <tr>
          <td>Table body td</td>
          <td>Table body td</td>
        </tr>
  </tbody>
</table>


<h2>Basic Form</h2>

  <fieldset>
  <legend>Form legend</legend>
  <div>
        <label for="f1">Text input:</label>
        <input type="text" id="f1" value="input text">
  </div>
  <div>
        <label for="f2">Radio input:</label>
        <input type="radio" id="f2" name="f2">
  </div>
  <div>
        <label for="f3">Checkbox input:</label>
        <input type="checkbox" id="f3">
  </div>
  <div>
        <label for="f4">Select field:</label>
        <select id="f4">
          <option>Option 01</option>
          <option>Option 02</option>
        </select>
  </div>
  <div>
        <label for="f5">Textarea:</label>
        <br>
        <textarea id="f5" cols="30" rows="5">Textarea text</textarea>
  </div>
  <div>
        <label for="f6">Button:</label>
        <input type="button" id="f6" value="button text">
  </div>
  </fieldset>



<h2>Block Quote</h2>
<blockquote>
  <p>“Paragraph inside Blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.”</p>
  <cite>&mdash; Citation</cite>
</blockquote>


<h2>Address</h2>
<address>
        1919 North Lynn Street<br>
        Arlington, VA 22209<br>
        Tel: 571-303-3000<br>
        Fax: 571-303-3100
</address>


<h2>Preformatted Text</h2>
<pre><strong>Preformated:</strong>Testing one row
         and another</pre>
         

<h2>Various inline tags</h2>
<p>
  I am <a href="#anchor">the a tag</a> example<br>
  I am <abbr title="test">the abbr tag</abbr> example<br>
  I am <acronym>the acronym tag</acronym> example<br>
  I am <b>the b tag</b> example<br>
  I am <big>the big tag</big> example<br>
  I am <cite>the cite tag</cite> example<br>
  I am <code>the code tag</code> example<br>
  I am <del>the del tag</del> example<br>
  I am <dfn>the dfn tag</dfn> example<br>
  I am <em>the em tag</em> example<br>
  I am <font face="verdana">the font tag</font> example<br>
  I am <i>the i tag</i> example<br>
  I am <ins>the ins tag</ins> example<br>
  I am <kbd>the kbd tag</kbd> example<br>
  I am <q>the q tag <q>inside</q> a q tag</q> example<br>
  I am <s>the s tag</s> example<br>
  I am <samp>the samp tag</samp> example<br>
  I am <small>the small tag</small> example<br>
  I am <span>the span tag</span> example<br>
  I am <strike>the strike tag</strike> example<br>
  I am <strong>the strong tag</strong> example<br>
  I am <sub>the sub tag</sub> example<br>
  I am <sup>the sup tag</sup> example<br>
  I am <tt>the tt tag</tt> example<br>
  I am <var>the var tag</var> example<br>
  I am <u>the u tag</u> example
</p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
JS
document.getElementsByTagName('table').length;
ready
jQuery
$('table').length;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.