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

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

NodeList 和 HTMLCollection 区别

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

Polyfilling forEach() 和 Iterable Behaviour

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

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

同样，如果浏览器缺少 NodeList 或 HTMLCollection 上的 Symbol.iterator 属性，也可以对其进行多重填充：

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 和 Edge）上无缝运行。提供的代码示例使开发人员能够轻松实现这些填充并恢复 forEach() 在 Microsoft 浏览器中的预期行为。