getElementById (for unknown number of items with classname) vs. querySelector (with classname) (v138)

Revision 138 of this benchmark created by tester on

Preparation HTML

<p id="i1">Item 1</p>
<p id="i2">Item 2</p>
<p id="i50" class="remove_this_class">Cloned and deleted items 47 times. This is Item 3</p>

Setup

var id = 1;
  var maxIds = 260;

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById ## max number of possible ids
while( id <= maxIds )
{
  var item = document.getElementById('i' + id);
  if( item && item.className.indexOf('remove_this_class') > -1 )
    item.className = '';
  id += 1;
}
ready
querySelectorAll by className
var items = document.querySelectorAll(".remove_this_class");
var max = items.length;
for( var i = 0; i < max; i++ )
{
  var item = items[i];
  if( item.className.indexOf('remove_this_class') > -1 )
    item.className = '';
}
ready

Revisions

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