为什么 querySelectorAll 上的 forEach 在 Microsoft 浏览器中的行为不符合预期？

querySelectorAll 上的 forEach 在 Microsoft 浏览器中的行为不符合预期：全面检查和解决方案

Internet Explorer 和 Edge 浏览器为使用 forEach() 的开发人员带来了独特的挑战querySelectorAll 结果上的方法。虽然该方法在大多数其他浏览器中得到了很好的支持，但 IE 和 Edge 由于使用了 DOM 方法和集合属性而遇到了困难。

NodeList 和 HTMLCollection 区别

与类似数组的 NodeList 实例不同HTMLCollection 实例表示匹配元素的静态快照，是实时集合，其更改会实时反映。 forEach() 方法最近才在 NodeList 中实现，而 HTMLCollection 不支持它。但是，这两个集合都是可迭代的，使它们能够扩展为数组或使用 for-of 循​​环或 Symbol.iterator 属性进行迭代。

Polyfilling forEach() 和 Iterable Behavior

To为了解决 NodeList 中缺少 forEach() 的问题，可以实现一个简单的 Polyfill：

if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

同样，如果浏览器缺少 NodeList 或 HTMLCollection 上的 Symbol.iterator 属性，也可以实现 Polyfill：

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

结论

通过了解 NodeList 和 HTMLCollection 之间的差异，并利用 polyfill 的强大功能，开发人员可以确保 forEach() 方法在所有浏览器中无缝运行，包括 Internet Explorer 和边缘。提供的代码示例使开发人员能够轻松实现这些填充并恢复 forEach() 在 Microsoft 浏览器中的预期行为。

以上是为什么 querySelectorAll 上的 forEach 在 Microsoft 浏览器中的行为不符合预期？的详细内容。更多信息请关注PHP中文网其他相关文章！