Bagaimana untuk Membetulkan Isu Array.forEach dengan HTMLCollections dalam Edge dan Internet Explorer?

Array.forEach Issue dengan HTMLCollections dalam Edge dan Internet Explorer

Pengenalan:

DOM sifat koleksi dan kaedah, seperti querySelectorAll, kembalikan koleksi, khususnya NodeLists (untuk querySelectorAll) atau HTMLCollections (untuk kaedah seperti getElementsByTagName). Koleksi ini berbeza daripada tatasusunan biasa dalam fungsinya.

Masalah dengan forEach:

NodeList dan HTMLCollection tidak menyokong kaedah forEach secara asli. Inilah sebabnya mengapa anda menghadapi ralat "Objek tidak menyokong sifat atau kaedah 'forEach'" dalam pelayar Microsoft Edge dan Internet Explorer.

Penyelesaian:

1. Polyfill forEach for NodeList:

Untuk menjadikan forEach berfungsi dengan NodeList, anda boleh mentakrifkannya sebagai:

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

2. Polyfill Iterability untuk NodeList dan HTMLCollection:

Oleh kerana NodeList dan HTMLCollection ditentukan untuk menjadi lelaran, anda boleh polyfill menggunakan:

<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>

Nota Tambahan:

• for-of: Kebolehubahan Polyfilling membolehkan anda menggunakan sintaks gelung for-of terus pada koleksi.
• Koleksi Langsung: HTMLCollection ialah koleksi langsung, bermakna perubahan pada DOM ditunjukkan dalam koleksi. NodeList tidak disiarkan.
• Keserasian: Pelayar sasaran polyfill yang disediakan tanpa asli untukSetiap sokongan, seperti IE11.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Isu Array.forEach dengan HTMLCollections dalam Edge dan Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!