Mengapakah \"Objek tidak menyokong harta atau kaedah \'forEach\'\" untuk Koleksi DOM dalam Pelayar Microsoft?

Isu dengan forEach() dalam Pelayar Microsoft untuk Koleksi DOM

Sebagai pembangun, kami sering bergantung pada kaedah forEach() untuk melintasi dan memanipulasi koleksi DOM. Walau bagaimanapun, kami mungkin menghadapi ralat yang mengecewakan "Objek tidak menyokong harta atau kaedah 'forEach'" dalam Internet Explorer 11 dan Edge.

Memahami Koleksi DOM

Kepada menyelesaikan isu ini, kita mesti memahami bahawa kaedah DOM seperti querySelectorAll mengembalikan koleksi, iaitu NodeList atau HTMLCollection, yang sememangnya tidak menyokong forEach().

• NodeList: Mewakili petikan elemen yang sepadan, tidak menggambarkan perubahan DOM secara automatik.
• HTMLCollection: Serupa dengan NodeList tetapi secara langsung, mencerminkan perubahan dalam DOM.

Polyfilling forEach ()

Memandangkan NodeList ditentukan untuk mempunyai forEach(), kami boleh polyfill dengan selamat:

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

Memastikan Kebolehubahan

NodeList dan HTMLCollection boleh diubah, tetapi pelayar lama mungkin tidak melaksanakan ini. Kami juga boleh lelaran poliisi:

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

Dengan adanya poliisi ini, kami boleh berjaya menggunakan forEach() pada NodeList dan HTMLCollection walaupun dalam IE11 dan Edge.

Penggunaan Contoh

<code class="js">var color_btns = document.querySelectorAll('#color > p');
color_btns.forEach(function(color) {
    // Our custom logic here...
});</code>

Pertimbangan Tambahan

Sesetengah perpustakaan DOM lama mungkin keliru dengan menambahkan forEach() pada HTMLCollection. Dalam kes sedemikian, hanya polyfill forEach() pada NodeList.

Atas ialah kandungan terperinci Mengapakah \"Objek tidak menyokong harta atau kaedah \'forEach\'\" untuk Koleksi DOM dalam Pelayar Microsoft?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!