Run results for: Test DOM elements selector

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

Browser: Chrome 54

Operating system: Mac OS X 10.11.4

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
querySelectorAll:class	2202.7 Ops/sec
querySelectorAll:id	1372.0 Ops/sec

Script Preparation code:

// Custom query selector
function queryAll(selector) {
  if (typeof selector !== 'string') return selector;
  
  // ID
  var id_sel = selector.match(/^#([\w-]*)$/);
  if (id_sel) {
    var elem = document.getElementById(id_sel[1]);
    return (elem ? [elem] : []);  // Always return an array
  }
  
  // CLASS
  var class_sel = !id_sel && selector.match(/^\.([\w-]+)$/);
  if (class_sel) {
    var elems = document.getElementsByClassName(class_sel[1]);
    return elems;
  }
  
  // TAG
  var tag_sel = !class_sel && selector.match(/^[\w-]+$/);
  if (tag_sel) {
    var elems = document.getElementsByTagName(selector);
    return elems;
  }
  
  // Fallback
  return document.querySelectorAll(selector);
}

// Prepare DOM elements
var elements = '';
for (var i=0, len=10000; i<len; i++){
  elements += '<div id="someid" class="someclass el'+i+'">'+i+'</div>';
}
document.body.innerHTML += elements;

Tests:

querySelectorAll:class
document.querySelectorAll('.someclass');
querySelectorAll:id
document.querySelectorAll('#someid');

Run results for: Test DOM elements selector

querySelectorAll:class

querySelectorAll:id