为什么 forEach() 在最新的 Microsoft 浏览器中不适用于 querySelectorAll？

querySelectorAll 上的 forEach 在最新的 Microsoft 浏览器中不起作用

forEach() 方法尽管得到广泛支持，但在最新版本的 Internet 中与 querySelectorAll 一起使用时会遇到一些问题Explorer (11) 和 Edge。

理解问题

NodeList 和 HTMLCollection 是表示匹配 DOM 元素的集合，在旧版 Microsoft 浏览器中本身缺少 forEach() 方法。然而，这些集合是可迭代的，允许使用 for-of 等替代方法循环遍历它们。

解决问题

Polyfilling forEach()

您可以在原生不支持的浏览器中手动将 forEach() 方法添加到 NodeList 和 HTMLCollection 中。这是一个简单有效的解决方案：

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

Polyfilling Iterability

如果浏览器具有 ES2015 功能但仍然缺乏 NodeList 可迭代性，您也可以进行 Polyfill：

<code class="javascript">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>

结论

通过填充 forEach() 和可迭代性，您可以克服旧版 Microsoft 浏览器的限制，并确保在使用 NodeList 和 HTMLCollection 集合时代码的行为一致。

以上是为什么 forEach() 在最新的 Microsoft 浏览器中不适用于 querySelectorAll？的详细内容。更多信息请关注PHP中文网其他相关文章！