為什麼 forEach() 在最新的 Microsoft 瀏覽器中不適用於 querySelectorAll？

querySelectorAll 上的forEach 在最新的Microsoft 瀏覽器中不起作用

forEach() 方法儘管得到廣泛支持，但在最新版本的Internet 中與querySelectorAllAll一起使用時會遇到一些問題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中文網其他相關文章！