Pourquoi « getElementsByClassName » ne renvoie-t-il pas un tableau en JavaScript ?

getElementsByClassName renvoie une collection HTML, pas un tableau

En JavaScript, la méthode document.getElementsByClassName renvoie une collection d'éléments DOM qui correspondent au spécifié nom de classe. Cependant, cette collection n'est pas un tableau, mais une HTMLCollection.

Dans les navigateurs modernes (Firefox 3 et versions ultérieures), la méthode Array.forEach peut être utilisée avec une HTMLCollection en définissant this valeur de la fonction forEach dans HTMLCollection. Voici comment procéder :

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

Array.prototype.forEach.call(els, function(el) {
  // Do something with the element
});

// Or, in ES6+
[].forEach.call(els, (el) => {
  // Do something with the element
});

Une approche plus moderne utilisant ES6 consiste à utiliser Array.from pour convertir HTMLCollection en un tableau réel :

Array.from(els).forEach((el) => {
  // Do something with the element
});

En définissant cette valeur ou en utilisant Array.from, vous pouvez parcourir HTMLCollection en utilisant la méthode forEach comme s'il s'agissait d'un tableau. Notez que les anciens navigateurs comme Internet Explorer 8 et versions antérieures ne prennent pas en charge cette approche et renverront une NodeList au lieu d'une HTMLCollection.

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!