Mengapa forEach pada querySelectorAll Tidak Berkelakuan Seperti Yang Diharapkan dalam Pelayar Microsoft?

forEach on querySelectorAll Not Behaving as Expected in Microsoft Browsers: A Comprehensive Examination and Solution

Internet Explorer and Edge browsers menyajikan cabaran unik untuk pembangun yang menggunakan forEach() kaedah pada hasil querySelectorAll. Walaupun kaedah ini disokong dengan baik dalam kebanyakan penyemak imbas lain, IE dan Edge menghadapi kesukaran disebabkan kaedah DOM dan sifat koleksi yang digunakan.

Perbezaan NodeList dan HTMLCollection

Tidak seperti contoh NodeList seperti tatasusunan , yang mewakili petikan statik elemen padanan, contoh HTMLCollection ialah koleksi langsung yang perubahannya ditunjukkan dalam masa nyata. Kaedah forEach() hanya dilaksanakan baru-baru ini dalam NodeList, manakala HTMLCollection tidak menyokongnya. Walau bagaimanapun, kedua-dua koleksi boleh dilelar, membolehkannya dikembangkan menjadi tatasusunan atau diulang menggunakan gelung for-of atau sifat Symbol.iterator.

Polyfilling forEach() dan Gelagat Boleh Lelar

Kepada menangani ketiadaan forEach() dalam NodeList, poliisi mudah boleh dilaksanakan:

if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

Begitu juga, jika penyemak imbas tidak mempunyai sifat Symbol.iterator pada NodeList atau HTMLCollection, ia juga boleh diisi poli:

if (typeof Symbol !== "undefined" && Symbol.iterator && typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype[Symbol.iterator]) {
    Object.defineProperty(NodeList.prototype, Symbol.iterator, {
        value: Array.prototype[Symbol.iterator],
        writable: true,
        configurable: true
    });
}

Kesimpulan

Dengan memahami perbezaan antara NodeList dan HTMLCollection, dan memanfaatkan kuasa polyfill, pembangun boleh memastikan bahawa kaedah forEach() beroperasi dengan lancar merentas semua pelayar, termasuk Internet Explorer dan Tepi. Sampel kod yang disediakan membolehkan pembangun melaksanakan poliisi ini dengan mudah dan memulihkan tingkah laku yang dijangkakan forEach() dalam pelayar Microsoft.

Atas ialah kandungan terperinci Mengapa forEach pada querySelectorAll Tidak Berkelakuan Seperti Yang Diharapkan dalam Pelayar Microsoft?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!