querySelectorAll[class] vs querySelectorAll[data-attribute] vs getElementsByClassName vs getElementsByTagName

Benchmark created by foobar on

Description

querySelectorAll[class] vs querySelectorAll[data-attribute] vs getElementsByClassName vs getElementsByTagName

Preparation HTML

<span></span><span></span><span></span><span></span>
<div class="foo" data-foo="bar">Hello, world!</div>
<span></span><span></span><span></span><span></span>
<div class="foo">LOL</div>
<span></span><span></span><span></span><span></span>
<div class="foo" data-foo="baz">Hello, world!</div>
<span></span><span></span><span></span><span></span>

Test runner

Ready to run.

Testing in
TestOps/sec
querySelectorAll[class]
var elsInClass = document.querySelectorAll('.foo');
var els = [];
for (var i = 0; i < elsInClass.length; i++) {
  var el = elsInClass[i];
  if (el.getAttribute('data-foo')) {
    els.push(el);
  }
}
ready
querySelectorAll[data-attribute]
var els = document.querySelectorAll('[data-foo]');
ready
getElementsByClassName
var elsInClass = document.getElementsByClassName('foo');
var els = [];
for (var i = 0; i < elsInClass.length; i++) {
  var el = elsInClass[i];
  if (el.getAttribute('data-foo')) {
    els.push(el);
  }
}
ready
getElementsByTagName('*')
var elsInClass = document.getElementsByTagName('*');
var els = [];
for (var i = 0; i < elsInClass.length; i++) {
  var el = elsInClass[i];
  if (el.getAttribute('data-foo')) {
    els.push(el);
  }
}
ready
getElementsByTagName('DIV')
var elsInClass = document.getElementsByTagName('DIV');
var els = [];
for (var i = 0; i < elsInClass.length; i++) {
  var el = elsInClass[i];
  if (el.getAttribute('data-foo')) {
    els.push(el);
  }
}
ready

Revisions

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

  • Revision 1: published by foobar on