Remove class queryselectorall

Benchmark created by John on July 18, 2014

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="parent">
<p class="active info">text</p>
<p class="active warning">text</p>

</div>


<div id="parent2">
<p class="info">text</p>
<p class="warning">text</p>

</div>

Setup

var removeClass = function(array, className) {
      var i = 0,
        len = array.length;
      for (; i < len; i++) {
    
        if (array[i].classList) {
          array[i].classList.remove(className);
        } else {
          var names = array[i].className.split(' '),
            j = 0,
            sublen = names.length;
    
          for (; j < sublen; j++) {
            if (names[j] === className) {
              names[j] = "";
            }
          }
          array[i].className = names.join('');
        }
      }
    };
    
    var addClass = function(array, className) {
    
      var i = 0,
        len = array.length;
      for (; i < len; i++) {
        if (array[i].classList) {
          if (array[i].classList.contains(className)) {
            array[i].classList.add(className);
          }
        } else {
          var names = array[i].className.split(' '),
            j = 0,
            sublen = names.length;
    
          for (; j < sublen; j++) {
            if (names[j] === className) {
              names[j] = "";
            }
          }
    
          names.push(' ');
          names.push(className);
          array[i].className = names.join('');
        }
      }
    };
    
    
    
    var parent2 = document.getElementById('parent2');

Test runner

var myNodeList = document.querySelectorAll('.active');
removeClass(myNodeList, 'active');

$(document.querySelectorAll('.active')).removeClass('active');

var myNodeList = parent2.querySelectorAll('p');
addClass(myNodeList, 'active');

var myNodeList = $(parent2).find('p').addClass('active');

Revisions

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

• Revision 1: published by John on July 18, 2014