Difference between getElementsByClassName and querySelectorAll? [duplicate]

Question

From my understanding,

var elems = document.querySelectorAll(".class");
var elems = document.getElementsByClassName("class");

should return the same things. However, when I try to remove the class from all the elements using

for (var i = 0; i < elems.length; ++i)
  elems[i].className = "";

I get different results. querySelectorAll successfully removes the classes from all the elements, but getElementsByClassName only removes the classes from about half the elements.

What's going on?

Answer 1

querySelectorAll doesn't return live DOM elements. Subsequent changes to the structure of the underlying document won't be reflected in the NodeList object returned by querySelectorAll. This means that the object will instead contain a list of matching Element nodes that were in the document at the time the list was created.

getElementsByClassName returns live DOM elements. Any subsequent change made to those DOM elements would be reflected in the list.