micro selector libraries (v18)

Revision 18 of this benchmark created by Phil Ricketts on

Preparation HTML

<div id="iddiv">
  <div class="inside"></div>
  <div class="inside"></div>
</div>
<div class="classdiv"></div>
<script>
// James Doyle - original regex version
window.$ = function(selector) {
  var matches = {
    '#': 'getElementById',
    '.': 'getElementsByClassName',
    '@': 'getElementsByName',
    '=': 'getElementsByTagName',
    '*': 'querySelectorAll'
  };
  var regex = /[=#@.*]/.exec(selector)[0];
  return (document[matches[regex]](selector.split(regex)[1]));
};
// Michał Wachowski
window.$$ = function(s) {
    return document[{
        '#': 'getElementById',
        '.': 'getElementsByClassName',
        '@': 'getElementsByName',
        '=': 'getElementsByTagName'}[s[0]]
        || 'querySelectorAll'](s.slice(1))
};
// Tomasz Żełudziewicz
window.$$$ = function(s) {
    try {return document[{
        '#': 'getElementById',
        '.': 'getElementsByClassName',
        '@': 'getElementsByName',
        '=': 'getElementsByTagName',
        '?': 'querySelectorAll'
    }[s[0]]](s.slice(1));}catch(e){}
};

// Phil Ricketts - switch version
window.get = function(selector,func){
	switch (selector[0]) {
		case '.': func = 'getElementsByClassName'; break;
		case '#': func = 'getElementById'; break;
		case '=': func = 'getElementsByTagName'; break;
		case '*': func = 'querySelectorAll'; break;
		case '@': func = 'getElementsByName'; break;
	};
	return document[func](selector.substring(0,1));
};
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Switch version
get('#iddiv');
get('.classdiv');
get('*div .inside');
ready
return string[0] in document
$$('#iddiv');
$$('.classdiv');
$$('?div .inside');
ready
try/catch return
$$$('#iddiv');
$$$('.classdiv');
$$$('?div .inside');
ready
document gets / query
document.getElementById('iddiv');
document.getElementsByClassName('classdiv');
document.querySelectorAll('div .inside');
ready
querySelectorAll
document.querySelectorAll('#iddiv');
document.querySelectorAll('.classdiv');
document.querySelectorAll('div .inside');
ready
querySelector
document.querySelector('#iddiv');
document.querySelector('.classdiv');
document.querySelector('div .inside');
ready
original regex
$('#iddiv');
$('.classdiv');
$('?div .inside');
ready

Revisions

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