為什麼 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中文網其他相關文章！