Warum schlägt das Iterieren einer HTMLCollection mit „for/of' manchmal fehl und welche Alternativen gibt es?

Iterieren einer HTMLCollection mit for/of

Beim Versuch, eine HTMLCollection mit for/of zu iterieren, kann es zu unerwarteten Ergebnissen kommen. Lassen Sie uns untersuchen, warum dies geschieht, und alternative Ansätze zum Iterieren von HTMLCollection-Elementen untersuchen.

Warum for/in fehlschlägt

Das Problem bei der Verwendung von for/in besteht darin, dass es iteriert die Eigenschaften des Objekts, nicht seine Elemente. Eine HTMLCollection ist ein Array-ähnliches Objekt, das heißt, sie enthält Elemente an Indizes. Es verfügt jedoch auch über Eigenschaften wie „length“ und „namedItem“.

Wenn Sie for/in für eine HTMLCollection verwenden, werden sowohl die Elementindizes (0, 1, 2, ...) als auch die Sammlungseigenschaften zurückgegeben. Dies führt zu einer unerwarteten Ausgabe, bei der einige Iterationen Element-IDs zurückgeben, während andere undefiniert sind (Nicht-Element-Eigenschaften).

Alternative Iterationsmethoden

Um diese Probleme zu vermeiden, finden Sie hier Es gibt mehrere Alternativen zu for/in:

• for/of Schleife:

  Moderne Browser unterstützen die Iteration von HTMLCollection- und NodeList-Objekten. Dies ist der einfachste und unkomplizierteste Ansatz.

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

• Array.from():

  ES6 hat Array.from() eingeführt Methode, die ein Array-ähnliches Objekt in ein tatsächliches Array konvertiert. Sie können dann mit for/of darüber iterieren.

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

• Manuelles Hinzufügen des Array-Iterators:

  In Browsern, die dies nicht tun Unterstützung für/von nativ können Sie den Array-Iterator manuell zur HTMLCollection oder NodeList hinzufügen Prototyp.

  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);
  }

• for-Schleife mit Längeneigenschaft:

  Ein traditionellerer Ansatz ist die Verwendung einer for-Schleife, die bis zum iteriert Länge der Sammlung.

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

Durch die Verwendung dieser alternativen Methoden können Sie effektiv über die Elemente iterieren einer HTMLCollection und greifen auf deren Eigenschaften zu, einschließlich ihrer IDs.

Das obige ist der detaillierte Inhalt vonWarum schlägt das Iterieren einer HTMLCollection mit „for/of' manchmal fehl und welche Alternativen gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!