السلام عليكم وش المفاهيم اللي تحتاج تتعلمه لتحترف التعامل مع الدوم
مثل event delegation وغيرها ؟
واذا فيه مصدر لتعلمه وهل هذا يعتبر من ادفانس جافاسكربت
وعليكم السلام ورحمة الله وبركاته
إتقان الـ DOM هو فعلاً من الأشياء اللي تفرق بين مبرمج مبتدئ ومبرمج محترف في JavaScript.
وأولاً تحتاج ل أن تفهم كيف يعمل الـ DOM Tree. المتصفح يحول صفحة الـ HTML إلى شجرة من العقد (nodes)، وكل عنصر في صفحتك هو عقدة لها علاقات مع العناصر الأخرى مثل الأب (parent) والأبناء (children) والأشقاء (siblings) كما بالمقالة التالية
وبعدها تحتاج لإتقان طرق الوصول إلى العناصر مثل querySelector وquerySelectorAll،
وبعدها من المهم جداً أن تفهم كيف تنتشر الأحداث في DOM. عندما يحدث حدث ما (مثل نقرة)، فإنه يمر بثلاث مراحل: مرحلة الالتقاط (capturing phase) ، ثم مرحلة الهدف (target phase) ، ثم مرحلة الفقاعة (bubbling phase) حيث يصعد الحدث مرة أخرى إلى الأعلى.
وأيضاً من المواضيع المهمة والمتقدمة في ال DOM هو
وبالنسبة للمصادر فلديك موسوعة حسوب وموقع MDN Web Docs وأيضاً الكتاب التالي ممتاز جداً
لم تذكر ما هو مستواك أو مدة تعلمك للغة جافاسكريبت وخبرتك بها؟ سأفترض أنك متوسط الخبرة.
بخصوص event delegation عليك تعلم الفرق بين target و currentTarget فهو أهم مفهوم لاستيعاب الـ Event Delegation بشكل صحيح، أي عندما تضغط على زر داخل div، الحدث ينطلق.
و كيفية التعامل مع كائن الحدث والخواص بداخله مثل event.target والذي هو العنصر الذي ضغطت عليه بالفعل، و event.currentTarget العنصر الذي يحمل الـ Event Listener أي الزر نفسه أو الـ div الأب.
تحتاج لمعرفة أي ابن تم ضغطه والخلط بينهما يسبب مشاكل، مثلاً تضغط على الأيقونة فلا يعمل الزر لأن الكود يتوقع الزر.
ثم تعلم التنقل للأب عن طريق دالة closest() وهي مكملة للـ Event Delegation، فبدلاً من كتابة parentNode.parentNode وهو أسلوب سيء، تستخدم closest('.class-name').
بمعنى عندما تعين مستمع على قائمة، والمستخدم يضغط على أيقونة داخل زر داخل القائمة، فأنت تريد الوصول للزر وليس الأيقونة.
menu.addEventListener('click', (e) => {
const button = e.target.closest('.btn');
if (!button) return;
console.log("تم ضغط الزر!");
});
لكن قبل ذلك يجب تعلم المفاهيم التالية:
ثم تعلم استخدام الـ dataset حيث يجب أن تتوقف عن الاعتماد على id أو محتوى النص innerText لتخزين البيانات، بل استخدم سمات data-* في الـ HTML، وتعامل معها بـ dataset في الـ JavaScript.
أي بدلاً من تخزين الـ ID في متغيرات، خزنه في الزر <button data-user-id="123" data-role="admin">حذف</button> ثم الوصول إلى تلك البيانات:
const userId = button.dataset.userId; const role = button.dataset.role;
ثم تعلم كيفية التحكم في الكلاسات عبر classList:
ثم كيفية إنشاء العناصر بـ createElement و append، بدلاً من استخدام innerHTML += '<div> </div>' الذي يعيد رسم القائمة بالكامل ويبطئ الصفحة ويمسح الـ Event Listeners القديمة.
const newDiv = document.createElement('div');
newDiv.classList.add('item');
newDiv.textContent = 'عنصر جديد';
container.append(newDiv);
أيضًا إزالة العناصر بـ remove()، فقديمًا كنا نحتاج للوصول للأب لحذف الابن parent.removeChild(child)،والآن ببساطة استدعي element.remove() على العنصر نفسه الذي تريد حذفه.
التعليقات