getElementById vs. querySelector (v223)

Revision 223 of this benchmark created by Sayed Baladoh on

Preparation HTML

<p id="foo">Foo</p>
<p id="bar">Bar</p>
<p id="baz">Baz</p>

Setup

var $ = $ || {};
  
  $ = function(selector, context) {
  	var elements = (context || document).querySelectorAll(selector);
  	return (elements.length > 0)? elements : null;
  };
  
  $.filterOperators = [
  	{"o": "EQUALS", "c": "=", "label": "equals"},
  	{"o": "CONTAINS", "c": "*=", "label": "contains"},
  	{"o": "STARTS_WITH", "c": "^=", "label": "starts with"},
  	{"o": "ENDS_WITH", "c": "$=", "label": "ends with"}
  	
  ];
  
  $.getOperator = function ( k ) {
  	fo= $.filterOperators;
  	for ( var i = 0, n = fo.length; i < n; i++ ) {		
  		var o = fo[i].o,
  			c = fo[i].c;
  		if (o.toLocaleLowerCase() == k.toLocaleLowerCase()) return c;
  	}
  };
  
  $.id = function(id) {
  	var element;
  	if (document.getElementById)
  		element =  document.getElementById(id);
  	else if (document.all)
  		element =  window.document.all[id];
  	else if (document.layers)
  		element =  window.document.layers[id];
  	return (element)? element : null;
  };

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById with condition
var operator="EQUALS",
	value="bar";
if(operator=="EQUALS"){
 var element = $.id(value);
}else if(operator=="CONTAINS"||operator=="STARTS_WITH"||operator=="ENDS_WITH"){
	opr=$.getOperator(operator);
	elems = $("[id"+opr+"'"+value+"']");
}else if(operator=="NOT_EQUALS"||operator=="NOT_CONTAINS"||operator=="NOT_STARTS_WITH"||operator=="NOT_ENDS_WITH"){
	opr=$.getOperator(operator.substr(4));
	elems = $(":not([id"+opr+"'"+value+"'])");
}
ready
querySelector with condition
var operator="CONTAINS",
	value="bar";
if(operator=="EQUALS"){
 var element = $.id(value);
}else if(operator=="CONTAINS"||operator=="STARTS_WITH"||operator=="ENDS_WITH"){
	opr=$.getOperator(operator);
	elems = $("[id"+opr+"'"+value+"']");
}else if(operator=="NOT_EQUALS"||operator=="NOT_CONTAINS"||operator=="NOT_STARTS_WITH"||operator=="NOT_ENDS_WITH"){
	opr=$.getOperator(operator.substr(4));
	elems = $(":not([id"+opr+"'"+value+"'])");
}
ready
querySelector without condition
var operator="EQUALS",
	value="bar";
if(operator=="EQUALS"||operator=="CONTAINS"||operator=="STARTS_WITH"||operator=="ENDS_WITH"){
	opr=$.getOperator(operator);
	elems = $("[id"+opr+"'"+value+"']");
}else if(operator=="NOT_EQUALS"||operator=="NOT_CONTAINS"||operator=="NOT_STARTS_WITH"||operator=="NOT_ENDS_WITH"){
	opr=$.getOperator(operator.substr(4));
	elems = $(":not([id"+opr+"'"+value+"'])");
}
ready

Revisions

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