querySelectorAll vs getElementsByClassName - performance

Question

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?
var container = document.getElementById('box-container');
var button = document.getElementById('button');
for (var i = 0; i < 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 < box1.length; i+=2){
box1[i].classList.toggle('gray');
};
var box2 = container.querySelectorAll('.box');
for (var i = 1;i < box2.length; i+=2){
box2[i-1].classList.toggle('gray');
};
});

Answer 1

The difference is the type of list you are running on.
box1 is a NodeList (a.k.a a live node list) which is updated when the DOM changes. box2 is an array, which is a non-live list - so changing the DOM doesn't affect it.
What happens when you iterate on box1 is that on every class toggle, the box1 list is updated, which causes the overhead.
Here's a test you can easily run:
var container = document.getElementById('box-container');
var button = document.getElementById('button');
for (var i = 0; i < 6000; i++) { // added 3000 more to challenge modern browsers...
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 < box1.length; i += 2) {
box1[i].classList.toggle('gray');
}
var deadBox1 = [];
for (i = 0; i < box1.length; i++) {
deadBox1[i] = box1[i];
}
for (var i = 1; i < deadBox1.length; i += 2) {
deadBox1[i].classList.toggle('gray');
}
var box2 = container.querySelectorAll('.box');
for (i = 1; i < box2.length; i += 2) {
box2[i - 1].classList.toggle('gray');
}
});
Now run the chrome performance (or timeline) tool. You can see the diff here: