hasClass-vs-is (v24)

Revision 24 of this benchmark created by Daniel Lewis on

Preparation HTML

<span class="irrelevant class4 irrelevant2">Element</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var $element = $('span');
  var element = $element[0];

Test runner

Ready to run.

Testing in
TestOps/sec
hasClass
if ($element.hasClass('class1') || $element.hasClass('class2') || $element.hasClass('class3') || $element.hasClass('class4') || $element.hasClass('class5')) {
  return 'hasClass';
}
ready
is
if ($element.is('.class1, .class2, .class3, .class4, .class5')) {
 return 'is';
}
ready
match
if( $element.attr('class') !== undefined && $element.attr('class').match(/class1|class2|class3|class4|class5/) ) {
  return "match";
}
ready
match on className
if( element.className.match(/class1|class2|class3|class4|class5/) ) {
  console.log("className");
}
ready
classList.contains
if ( ['class1','class2','class3','class4','class5'].some( function(name) {
return element.classList.contains(name);
} ) ) {
console.log("classList");
}
ready

Revisions

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