為什麼使用「for/of」迭代 HTMLCollection 有時會失敗，有哪些替代方法？

使用 for/of 迭代 HTMLCollection

嘗試使用 for/of 迭代 HTMLCollection 時，您可能會遇到意外結果。讓我們深入研究為什麼會發生這種情況，並探索迭代 HTMLCollection 元素的替代方法。

為什麼 for/in 失敗

使用 for/in 的問題是它會迭代物件的屬性，而不是其元素。 HTMLCollection 是一個類似陣列的對象，這表示它包含索引處的元素。但是，它還具有 length 和namedItem 等屬性。

當您在 HTMLCollection 上使用 for/in 時，它將傳回元素索引（0, 1, 2, ...）和集合屬性。這會導致意外的輸出，其中一些迭代返回元素 ID，而其他迭代則未定義（非元素屬性）。

替代迭代方法

為了避免這些問題，有for/in 的幾個替代方法：

• for/of循環：

  現代瀏覽器支援HTMLCollection 和NodeList 物件的迭代。這是最簡單直接的方法。

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

• Array.from():

  ES6 引入了Array.from()方法，它將類似數組的物件轉換為實際的數組。然後，您可以使用 for/of 對其進行迭代。

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

• 手動新增陣列迭代器：

  在不支援的瀏覽器中原生支援/of，您可以手動將Array迭代器加入HTMLCollection或NodeList

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

• 具有 Length 屬性的 for 迴圈：

  更傳統的方法是使用 for 迴圈迭代到集合的長度。

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

透過利用這些替代方法，您可以有效地迭代 HTMLCollection 的元素並存取它們的屬性，包括它們的 ID。

以上是為什麼使用「for/of」迭代 HTMLCollection 有時會失敗，有哪些替代方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！