使用 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中文網其他相關文章!