为什么 Microsoft 浏览器中的 DOM 集合会抛出“对象不支持属性或方法 'forEach'\”？

Microsoft 浏览器中用于 DOM 集合的 forEach() 问题

作为开发人员，我们经常依赖 forEach() 方法来遍历和操作 DOM 集合。然而，我们可能会在 Internet Explorer 11 和 Edge 中遇到令人沮丧的错误“对象不支持属性或方法 'forEach'”。

了解 DOM 集合

To要解决这个问题，我们必须了解像querySelectorAll这样的DOM方法返回集合，即NodeList或HTMLCollection，它们本身并不支持forEach()。

• NodeList:代表一个快照匹配元素，不会自动反映 DOM 更改。
• HTMLCollection： 与 NodeList 类似，但实时，反映 DOM 中的更改。

Polyfilling forEach ()

由于 NodeList 被指定有 forEach()，我们可以安全地填充它：

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

确保可迭代性

NodeList 和 HTMLCollection 是可迭代的，但较旧的浏览器可能无法实现这一点。我们还可以对可迭代性进行填充：

<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>

有了这些填充，我们甚至可以在 IE11 和 Edge 中成功地在 NodeList 和 HTMLCollection 上使用 forEach()。

示例用法

<code class="js">var color_btns = document.querySelectorAll('#color > p');
color_btns.forEach(function(color) {
    // Our custom logic here...
});</code>

其他注意事项

将 forEach() 添加到 HTMLCollection 可能会混淆一些旧版 DOM 库。在这种情况下，只能在 NodeList 上填充 forEach()。

以上是为什么 Microsoft 浏览器中的 DOM 集合会抛出“对象不支持属性或方法 'forEach'\”？的详细内容。更多信息请关注PHP中文网其他相关文章！