Pourquoi « getElementsByClassName » ne fonctionne-t-il pas directement avec « forEach » ?

Array.forEach, méthode : compatibilité avec getElementsByClassName

Lors d'une tentative d'itération sur des éléments DOM à l'aide de la méthode getElementsByClassName, les développeurs peuvent rencontrer un erreur particulière : "document.getElementsByClassName('myclass').forEach n'est pas une fonction." Malgré la présence de getElementsByClassName et d'Array.forEach dans Firefox 3, l'erreur persiste.

La confusion survient car le résultat de getElementsByClassName n'est pas un tableau. Dans les navigateurs modernes, il s'agit d'une HTMLCollection, une collection spécialisée adaptée aux éléments HTML. Bien qu'il possède des propriétés semblables à celles d'un tableau, ce n'est pas un véritable tableau.

Pour résoudre le problème et réussir à parcourir les éléments, les développeurs peuvent utiliser une astuce : ils peuvent appeler la méthode forEach d'Array, en passant HTMLCollection comme paramètre. cette valeur :

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
});

Cette technique permet à l'itération de se dérouler comme prévu. Alternativement, les développeurs peuvent utiliser Array.from, disponible dans les environnements ES6, pour convertir la HTMLCollection en Array avant d'itérer :

Array.from(els).forEach((el) => {
    // Do stuff here
});

En utilisant ces techniques, les développeurs peuvent itérer efficacement sur les éléments DOM obtenus via getElementsByClassName, garantissant compatibilité avec la méthode Array.forEach.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!