title: querySelectorAll vs getElementsByClassName
body: <p>When I looping through a nodelist obtained by querySelectorAll and add a new class for each one,it takes much less time(3ms) than which obtained by getElementsByClassName(100ms).Why?</p>
  
  <pre><code>var container = document.getElementById('box-container');
  var button = document.getElementById('button');
  
  for (var i = 0; i &lt; 3000; i++) {
    var div = document.createElement('div');
    div.classList.add('box');
    div.index = i;
    container.appendChild(div);
  }
  
  button.addEventListener('click', function() {
  
    var box1 = container.getElementsByClassName('box');
    for (var i = 1;i &lt; box1.length; i+=2){
        box1[i].classList.toggle('gray');
    };
  
    var box2 = container.querySelectorAll('.box');
    for (var i = 1;i &lt; box2.length; i+=2){
        box2[i-1].classList.toggle('gray');
    };
  
  });
  </code></pre>