.className vs getAttribute( 'class' )

Benchmark created by ThinkingStiff on

Preparation HTML

<div id="result" class="one two"></div>

Setup

Element.prototype.hasClass1 = function ( className )
    {
    
        return this.getAttribute( 'class' ).split( ' ' ).indexOf( className ) > -1;
            
    };
    
    Element.prototype.hasClass2 = function ( className )
    {
    
        return this.className.split( ' ' ).indexOf( className ) > -1;
    
    };
    
    var result = document.getElementById( 'result' );

Test runner

Ready to run.

Testing in
TestOps/sec
.getAttribute( 'class' )
var hasClass = result.hasClass1( 'one' );
hasClass = result.hasClass1( 'three' );
ready
.className
var hasClass = result.hasClass2( 'one' );
hasClass = result.hasClass2( 'three' );
ready

Revisions

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

  • Revision 1: published by ThinkingStiff on
  • Revision 3: published by Oleksandr Kelepko on