Differenza tra getElementsByClassName e querySelectorAll?

Question

Dalla mia comprensione,

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

dovrebbe restituire le stesse cose. Tuttavia, quando provo a rimuovere la classe da tutti gli elementi usando

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

Ottengo risultati diversi. querySelectorAll rimuove correttamente le classi da tutti gli elementi, ma getElementsByClassName rimuove solo le classi da circa la metà degli elementi.

Cosa sta succedendo?

Answer 1

querySelectorAll non restituisce elementi DOM dal vivo. Le modifiche successive alla struttura del documento sottostante non si rifletteranno nell'oggetto NodeList restituito da querySelectorAll. Ciò significa che l'oggetto conterrà invece un elenco di nodi Element corrispondenti che erano nel documento al momento della creazione dell'elenco.

getElementsByClassName restituisce elementi DOM dal vivo. Qualsiasi modifica successiva apportata a tali elementi DOM si rifletterà nell'elenco.

Answer 2

Per espandere la risposta di Anirudha, quando si cambiano i nomi delle classi sulla lista degli elementi dal vivo recuperati da getElementsByClassName, si riduce il numero di risultati (poiché gli elementi disponibili nell'elenco sono presenti solo perché hanno la classe nome).

Pertanto la proprietà elems.length viene ridotta di un'unità ad ogni iterazione e si ottiene solo metà degli elementi.