إتقان الـ 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 وأيضاً الكتاب التالي ممتاز جداً
مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.
التعليقات