如何修复 Edge 和 Internet Explorer 中 HTMLCollections 的 Array.forEach 问题？

Edge 和 Internet Explorer 中 HTMLCollections 的 Array.forEach 问题

简介：

DOM集合属性和方法（例如 querySelectorAll）返回集合，特别是 NodeList（对于 querySelectorAll）或 HTMLCollections（对于 getElementsByTagName 等方法）。这些集合在功能上与常规数组不同。

forEach 的问题：

NodeList 和 HTMLCollection 本身不支持 forEach 方法。这就是为什么您在 Microsoft Edge 和 Internet Explorer 浏览器中遇到错误“对象不支持属性或方法 'forEach'”。

解决方案：

1. NodeList 的 Polyfill forEach：

要使 forEach 与 NodeList 一起使用，您可以将其定义为：

<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中文网其他相关文章！