Pourquoi « forEach » ne fonctionne-t-il pas directement sur « HTMLCollection » ?

Itérer sur HTMLCollection avec Array.forEach

Dans ce dilemme, un développeur tente d'itérer sur des éléments DOM en utilisant document.getElementsByClassName("myclass").forEach uniquement pour vous rencontrez une erreur indiquant : ".forEach n'est pas une fonction."

Compréhension HTMLCollection

La clé pour résoudre cette erreur réside dans la compréhension de la nature du résultat renvoyé par getElementsByClassName. Contrairement à son nom, il ne produit pas de tableau mais plutôt une HTMLCollection. HTMLCollection, tout comme NodeList, suit la spécification DOM4 et diffère d'un tableau traditionnel de manière subtile mais significative.

Conversion de HTMLCollection en Array

Pour utiliser la puissante méthode forEach, il faut d'abord transformer le HTMLCollection dans un tableau. Plusieurs méthodes peuvent réaliser cette conversion :

Utilisation de Array.prototype.forEach.call :

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

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

Utilisation de [].forEach.call :

[].forEach.call(els, function (el) {...});

Utilisation de Array.from (ES6) :

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

En convertissant HTMLCollection en tableau, on peut exploiter la pléthore de méthodes de tableau, y compris forEach, pour traiter et manipuler efficacement les éléments DOM.

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!