


Pourquoi « getElementsByClassName » ne fonctionne-t-il pas directement avec « forEach » ?
Dec 01, 2024 am 11:01 AM<h2>Array.forEach, méthode : compatibilité avec getElementsByClassName</h2>
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Remplacer les caractères de chaîne en javascript

jQuery Vérifiez si la date est valide

jQuery obtient un rembourrage / marge d'élément

10 vaut la peine de vérifier les plugins jQuery

Http débogage avec le nœud et le http-console

jQuery Ajouter une barre de défilement à div

Tutoriel de configuration de l'API de recherche Google personnalisé
