hasClass vs is vs native vs custom function - all and any (v30)

Revision 30 of this benchmark created on

Preparation HTML

<span id="test" class="class0 class1 class2 class3 class4 class5 class6 class7 class8 class9 c1 c2 c3 c4 c5 c6 c7 c8 c9 cl1 cl2 cl3 cl4 cl5 cl6 cl7 cl8 cl9 cls1 cls2 cls3 cls4 cls5 cls6 cls7 cls8 cls9">Element</span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

// cache element for speed
  var __test = document.getElementById('test');
  var _$test = $('#test');
  
  Node.prototype.hasAnyClass = function(classNames) {
    var i = -1,
      classes = classNames.split(' '),
      len = classes.length;
    while (++i < len) {
      if (this.classList.contains(classes[i])) {
        return true;
      }
    }
    return false;
  };
  
  Node.prototype.hasAllClasses = function(classNames) {
    var i = -1,
      classes = classNames.split(' '),
      len = classes.length,
      matches = 0;
    while (++i < len) {
      if (this.classList.contains(classes[i])) {
        matches++;
      }
    }
    return matches === len;
  };

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery hasClass (any)
if (
  _$test.hasClass('class1') ||
  _$test.hasClass('c2') ||
  _$test.hasClass('cl3') ||
  _$test.hasClass('cls4')
) {
  console.log("jQuery hasClass (any)");
}
ready
jQuery is (any)
if (_$test.is('.class1, .c2, .cl3, .cls4')) {
  console.log("jQuery is (any)");
}
ready
jQuery attr match (any)
if (_$test.attr('class').match(/class1|c2|cl3|cls4/)) {
  console.log("jQuery + match (any)");
}
ready
jQuery hasClass (all)
if (
  _$test.hasClass('class1') &&
  _$test.hasClass('c2') &&
  _$test.hasClass('cl3') &&
  _$test.hasClass('cls4')
) {
  console.log("jQuery hasClass (all)");
}
ready
jQuery is (all)
if (_$test.is('.class1.c2.cl3.cls4')) {
  console.log("jQuery is (all)");
}
ready
native className indexOf (any)
if (
  __test.className.indexOf('class1') > -1 ||
  __test.className.indexOf('c2') > -1 ||
  __test.className.indexOf('cl3') > -1 ||
  __test.className.indexOf('cls4') > -1
) {
  console.log('native indexOf (any)')
}
ready
native className indexOf (all)
if (
  __test.className.indexOf('class1') > -1 &&
  __test.className.indexOf('c2') > -1 &&
  __test.className.indexOf('cl3') > -1 &&
  __test.className.indexOf('cls4') > -1
) {
  console.log('native indexOf (all)')
}
ready
native classList contains (any)
if (
  __test.classList.contains('class1') ||
  __test.classList.contains('c2') ||
  __test.classList.contains('cl3') ||
  __test.classList.contains('cls4')
) {
  console.log('native classList contains (any)')
}
ready
native classList contains (all)
if (
  __test.classList.contains('class1') &&
  __test.classList.contains('c2') &&
  __test.classList.contains('cl3') &&
  __test.classList.contains('cls4')
) {
  console.log('native classList contains (all)')
}
ready
custom hasAnyClass function (any)
if (__test.hasAnyClass('class1 c2 cl3 cls4')) {
  console.log("custom hasAnyClass (any)");
}
ready
custom hasAllClasses function (all)
if (__test.hasAllClasses('class1 c2 cl3 cls4')) {
  console.log("custom hasAllClasses (all)");
}
ready

Revisions

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