لا يعمل forEach on querySelectorAll كما هو متوقع في متصفحات Microsoft: فحص وحل شامل

تمثل متصفحات Internet Explorer وEdge تحديًا فريدًا للمطورين الذين يستخدمون forEach() طريقة على نتيجة querySelectorAll. على الرغم من أن هذه الطريقة مدعومة جيدًا في معظم المتصفحات الأخرى، إلا أن IE وEdge يواجهان صعوبات بسبب أساليب DOM وخصائص المجموعة المستخدمة.

تمييز NodeList وHTMLCollection

على عكس مثيلات NodeList المشابهة للمصفوفة ، والتي تمثل لقطة ثابتة للعناصر المطابقة، ومثيلات HTMLCollection عبارة عن مجموعات مباشرة تنعكس تغييراتها في الوقت الفعلي. تم تنفيذ طريقة forEach() مؤخرًا فقط في NodeList، بينما لا يدعمها HTMLCollection. ومع ذلك، كلا المجموعتين قابلتان للتكرار، مما يتيح توسيعهما إلى مصفوفات أو تكرارهما باستخدام حلقة for-of أو خاصية الرمز.

Polyfilling forEach() وIterable Behavior

To لمعالجة غياب forEach() في NodeList، يمكن تنفيذ عملية polyfill بسيطة:

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

وبالمثل، إذا كان المتصفح يفتقر إلى خاصية الرمز.iterator في NodeList أو HTMLCollection، فيمكن تعبئته أيضًا:

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
    });
}

الاستنتاج

من خلال فهم الاختلافات بين NodeList وHTMLCollection، والاستفادة من قوة polyfills، يمكن للمطورين التأكد من أن طريقة forEach() تعمل بسلاسة عبر جميع المتصفحات، بما في ذلك Internet Explorer وEdge. . نماذج التعليمات البرمجية المقدمة تمكن المطورين من تنفيذ عمليات التعبئة المتعددة هذه بسهولة واستعادة السلوك المتوقع لـ forEach() في متصفحات Microsoft.