Pourquoi l'itération d'une HTMLCollection avec « for/of » échoue-t-elle parfois et quelles sont les alternatives ?

Itérer une HTMLCollection avec for/of

Lorsque vous essayez d'itérer une HTMLCollection à l'aide de for/of, vous pouvez rencontrer des résultats inattendus. Voyons pourquoi cela se produit et explorons des approches alternatives pour itérer les éléments HTMLCollection.

Pourquoi for/in échoue

Le problème avec l'utilisation de for/in est qu'il itère sur les propriétés de l'objet, pas ses éléments. Un HTMLCollection est un objet de type tableau, ce qui signifie qu'il contient des éléments au niveau des indices. Cependant, il possède également des propriétés telles que length et approvedItem.

Lorsque vous utilisez for/in sur une HTMLCollection, il renverra à la fois les index des éléments (0, 1, 2, ...) et les propriétés de la collection. Cela conduit à une sortie inattendue, où certaines itérations renvoient des ID d'élément tandis que d'autres ne sont pas définies (propriétés non-élémentaires).

Méthodes d'itération alternatives

Pour éviter ces problèmes, il y a existe plusieurs alternatives à for/in :

• for/of Boucle :

  Les navigateurs modernes prennent en charge l'itération des objets HTMLCollection et NodeList. Il s'agit de l'approche la plus simple et la plus directe.

    var list = document.getElementsByClassName("events");
    for (let item of list) {
     console.log(item.id);
    }

• Array.from() :

  ES6 a introduit Array.from() méthode, qui convertit un objet de type tableau en un tableau réel. Vous pouvez ensuite le parcourir en utilisant for/of.

  Array.from(document.getElementsByClassName("events")).forEach(item => {
      console.log(item.id);
  });

• Ajout manuel de l'itérateur de tableau :

  Dans les navigateurs qui ne le font pas prise en charge de/de nativement, vous pouvez ajouter manuellement l'itérateur Array à HTMLCollection ou NodeList prototype.

  NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
  HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
  
  // Use for/of as with modern browsers
  for (let item of list) {
      console.log(item.id);
  }

• boucle for avec propriété de longueur :

  Une approche plus traditionnelle consiste à utiliser une boucle for qui itère jusqu'au longueur de la collection.

  var list = document.getElementsByClassName("events");
  for (var i = 0; i < list.length; i++) {
      console.log(list[i].id);
  }

En utilisant ces méthodes alternatives, vous pouvez efficacement parcourir la éléments d'une HTMLCollection et accéder à leurs propriétés, y compris leurs identifiants.

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!