مفاهيم مثل event delegation

وعليكم السلام ورحمة الله وبركاته

إتقان الـ DOM هو فعلاً من الأشياء اللي تفرق بين مبرمج مبتدئ ومبرمج محترف في JavaScript.

وأولاً تحتاج ل أن تفهم كيف يعمل الـ DOM Tree. المتصفح يحول صفحة الـ HTML إلى شجرة من العقد (nodes)، وكل عنصر في صفحتك هو عقدة لها علاقات مع العناصر الأخرى مثل الأب (parent) والأبناء (children) والأشقاء (siblings) كما بالمقالة التالية

وبعدها تحتاج لإتقان طرق الوصول إلى العناصر مثل querySelector وquerySelectorAll،

وبعدها من المهم جداً أن تفهم كيف تنتشر الأحداث في DOM. عندما يحدث حدث ما (مثل نقرة)، فإنه يمر بثلاث مراحل: مرحلة الالتقاط (capturing phase) ، ثم مرحلة الهدف (target phase) ، ثم مرحلة الفقاعة (bubbling phase) حيث يصعد الحدث مرة أخرى إلى الأعلى.

وأيضاً من المواضيع المهمة والمتقدمة في ال DOM هو

• تحسين الأداء باستخدام Document Fragment
• Intersection Observer API
• Mutation Observer
• Reflow وRepaint

وبالنسبة للمصادر فلديك موسوعة حسوب وموقع MDN Web Docs وأيضاً الكتاب التالي ممتاز جداً