如何修復 Edge 和 Internet Explorer 中 HTMLCollections 的 Array.forEach 問題？

Edge 與Internet Explorer 中HTMLCollections 的Array.forEach 問題

簡介：

DO集合屬性和方法（例如querySelectorAll）傳回集合，特別是NodeList（對於querySelectorAll）或HTMLCollections（對於getElementsByTagName 等方法）。這些集合在功能上與常規數組不同。

forEach 的問題：

NodeList 和 HTMLCollection 本身不支援 forEach 方法。這就是為什麼您在 Microsoft Edge 和 Internet Explorer 瀏覽器中遇到錯誤「物件不支援屬性或方法 'forEach'」。

解決方案：

1. NodeList 的Polyfill forEach：

要使forEach 並定義為：

<code class="js">if (typeof NodeList !== "undefined" &amp;&amp; NodeList.prototype &amp;&amp; !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}</code>

2。 NodeList 和HTMLCollection 的Polyfill 可迭代性：

由於NodeList 和HTMLCollection 被指定為可迭代，您可以使用以下方法對其進行Polyfill：

<code class="js">if (typeof Symbol !== "undefined" &amp;&amp; Symbol.iterator &amp;&amp; typeof NodeList !== "undefined" &amp;&amp; NodeList.prototype &amp;&amp; !NodeList.prototype[Symbol.iterator]) {
    Object.defineProperty(NodeList.prototype, Symbol.iterator, {
        value: Array.prototype[Symbol.iterator],
        writable: true,
        configurable: true
    });
}</code>

附加說明： for-of：Polyfilling 可迭代性可讓您直接在集合上使用for-of 連結語法。 Live Collection： HTMLCollection 是一個即時集合，這表示 DOM 的變更會反映在集合中。 NodeList 尚未上線。 相容性：提供的 Polyfill 目標瀏覽器不支援原生 forEach，例如 IE11。

以上是如何修復 Edge 和 Internet Explorer 中 HTMLCollections 的 Array.forEach 問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！