Why Does Iterating an HTMLCollection with `for/of` Sometimes Fail, and What Are the Alternatives?

Iterating an HTMLCollection with for/of

When attempting to iterate an HTMLCollection using for/of, you may encounter unexpected results. Let's delve into why this occurs and explore alternative approaches for iterating HTMLCollection elements.

Why for/in Fails

The issue with using for/in is that it iterates over the object's properties, not its elements. An HTMLCollection is an array-like object, meaning it contains elements at indices. However, it also has properties like length and namedItem.

When you use for/in on an HTMLCollection, it will return both the element indexes (0, 1, 2, ...) and the collection properties. This leads to unexpected output, where some iterations return element IDs while others are undefined (non-element properties).

Alternative Iteration Methods

To avoid these issues, there are several alternatives to for/in:

• for/of Loop:

  Modern browsers support for/of iteration of HTMLCollection and NodeList objects. This is the simplest and most straightforward approach.

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

• Array.from():

  ES6 introduced the Array.from() method, which converts an array-like object to an actual array. You can then iterate over it using for/of.

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

• Manually Adding the Array Iterator:

  In browsers that don't support for/of natively, you can manually add the Array iterator to the HTMLCollection or 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);
  }

• for Loop with Length Property:

  A more traditional approach is to use a for loop that iterates up to the length of the collection.

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

By utilizing these alternative methods, you can effectively iterate over the elements of an HTMLCollection and access their properties, including their IDs.

The above is the detailed content of Why Does Iterating an HTMLCollection with `for/of` Sometimes Fail, and What Are the Alternatives?. For more information, please follow other related articles on the PHP Chinese website!