الرئيسية/⚡ JavaScript + ES6+/أساسيات DOM والأحداث

الدرس 6 / 7⏱ 25 دقيقة

أساسيات DOM والأحداث

هيكل DOM، querySelector، الأحداث، Event Delegation

ما هو DOM؟

DOM يعني نموذج كائن المستند (Document Object Model). هو واجهة برمجة تطبيقات تمثل محتوى صفحة الويب كشجرة كائنات. يُحوّل المتصفح HTML إلى شجرة يمكن لجافاسكريبت التفاعل معها وتعديلها.

💡 تشبيه::

DOM مثل شجرة عائلية: document هو الجذر، تحته الفروع (عناصر HTML)، وكل فرع يمكن أن يحتوي على فروع أخرى.

لماذا نستخدم DOM؟

بدون DOM، كانت صفحات الويب ثابتة وغير قابلة للتعديل. DOM يسمح بجعل الصفحات تفاعلية: تحديث المحتوى، إظهار/إخفاء العناصر، وإضافة عناصر جديدة دون إعادة تحميل الصفحة.

💡 ملاحظة حول React::

في React، لا نعدّل DOM يدويًا - React يتعامل مع ذلك تلقائيًا. لكن فهم DOM يساعدك على فهم ما يفعله React خلف الكواليس.

المشكلة التي يحلها DOM

قبل DOM، كان المتصفحات تعرض HTML كنص ثابت فقط. DOM يوفر تمثيلًا شجريًا لكل عنصر وواجهة برمجة للبحث والتعديل والتفاعل معه.

شرح بسيط

ثلاث طرق رئيسية لاختيار العناصر:

getElementById: البحث بالـ id فقط. querySelector: أكثر مرونة ويدعم أي محدد CSS.

مثال بسيط: تعديل العناصر

تغيير النص وHTML والنمط، إضافة/تبديل الفئات، وتعيين السمات.

مثال عملي: قائمة مهام تفاعلية

قائمة مهام تفاعلية كاملة مع وظائف الإضافة والحذف باستخدام addEventListener و createElement و appendChild.

الأحداث

الأحداث هي طريقة جافاسكريبت للاستجابة لتفاعلات المستخدم.

click / dblclick - النقر

input / change - تغيير الحقول

submit - إرسال النموذج

keydown / keyup - المفاتيح

scroll - التمرير

تفويض الأحداث - نمط مهم

تفويض الأحداث: بدلاً من مستمع لكل عنصر، أضف مستمعًا واحدًا للأب وتحقق من event.target.

💡 لماذا مهم؟:

يعمل مع العناصر المنشأة ديناميكيًا. موفر للذاكرة: مستمع واحد بدلاً من المئات.

ماذا يحدث خلف الكواليس؟

عندما يحدث حدث، يمر بثلاث مراحل:

التقاط: يهبط من الجذر إلى العنصر المستهدف

الهدف: يصل إلى العنصر ويعمل المستمع

الفقاعات: يصعد من الهدف إلى الجذر

هذه الآلية تجعل تفويض الأحداث ممكنًا - الأحداث تنتقل من الأبناء إلى الآباء عبر مرحلة الفقاعات.

الأخطاء الشائعة

الخلط بين querySelector و querySelectorAll: querySelector يُرجع عنصرًا واحدًا، querySelectorAll يُرجع جميع العناصر المطابقة.

استخدام innerHTML مع نص المستخدم: يسمح بهجمات XSS. استخدم textContent بدلاً من ذلك.

نسيان removeEventListener: أزل المستمعين دائمًا عند الانتهاء لمنع تسرب الذاكرة.

أفضل الممارسات

فضل querySelector/All: أكثر مرونة.

استخدم textContent بدلاً من innerHTML: لتجنب XSS.

استخدم تفويض الأحداث: للعناصر الديناميكية.

أزل المستمعين عند الانتهاء: لمنع تسرب الذاكرة.

في React، لا تعدّل DOM يدويًا: دع React يتعامل مع ذلك.

ملخص

DOM هو تمثيل شجري لمحتوى الصفحة يمكن لجافاسكريبت التفاعل معه.

الاختيار: getElementById و querySelector و querySelectorAll.

التعديل: textContent و innerHTML و classList و style.

الإنشاء/الحذف: createElement و appendChild و remove.

الأحداث: addEventListener للاستجابة لتفاعلات المستخدم.

تفويض الأحداث: مستمع واحد على الأب يتعامل مع جميع الأبناء.

في React: لا نعدّل DOM مباشرة - React يستخدم DOM افتراضيًا.

❓Quiz

ما هو الفرق بين querySelector و getElementById؟

❓Quiz

لماذا نستخدم تفويض الأحداث؟

🎯تحدي: عداد تفاعلي

أنشئ عدادًا مع: عنصر يعرض العداد (يبدأ من 0)، زر +1، زر -1، وزر إعادة تعيين. استخدم querySelector و addEventListener.

الحل:

javascript
const countEl = document.getElementById("count");
let count = 0;

document.getElementById("increase").addEventListener("click", () => {
  count++;
  countEl.textContent = count;
});

document.getElementById("decrease").addEventListener("click", () => {
  count--;
  countEl.textContent = count;
});

document.getElementById("reset").addEventListener("click", () => {
  count = 0;
  countEl.textContent = count;
});

📋ورقة مرجعية DOM والأحداث

اختيار العناصر:

javascript
document.getElementById("id")
document.querySelector(".class")
document.querySelectorAll("li")
element.parentElement
element.children

الأحداث:

javascript
el.addEventListener("click", fn)
el.removeEventListener("click", fn)
"click" "input" "submit" "keydown"
event.target / event.preventDefault()

تعديل العناصر:

javascript
el.textContent = "جديد"
el.innerHTML = "<b>جديد</b>"
el.style.color = "red"
el.classList.add("أ")
el.setAttribute("href", "#")

الإنشاء والحذف:

javascript
document.createElement("div")
parent.appendChild(div)
div.remove()
element.cloneNode(true)

→

الدرس السابق

⚡ دوال المصفوفات والكائنات الحديثة

الدرس التالي

⚡ مشروع JavaScript تطبيقي

←

جاري التحميل...

ما هو DOM؟

💡 تشبيه::

DOM مثل شجرة عائلية: document هو الجذر، تحته الفروع (عناصر HTML)، وكل فرع يمكن أن يحتوي على فروع أخرى.

لماذا نستخدم DOM؟

💡 ملاحظة حول React::

في React، لا نعدّل DOM يدويًا - React يتعامل مع ذلك تلقائيًا. لكن فهم DOM يساعدك على فهم ما يفعله React خلف الكواليس.

تفويض الأحداث - نمط مهم

تفويض الأحداث: بدلاً من مستمع لكل عنصر، أضف مستمعًا واحدًا للأب وتحقق من event.target.

💡 لماذا مهم؟:

يعمل مع العناصر المنشأة ديناميكيًا. موفر للذاكرة: مستمع واحد بدلاً من المئات.

ماذا يحدث خلف الكواليس؟

عندما يحدث حدث، يمر بثلاث مراحل:

التقاط: يهبط من الجذر إلى العنصر المستهدف

الهدف: يصل إلى العنصر ويعمل المستمع

الفقاعات: يصعد من الهدف إلى الجذر

هذه الآلية تجعل تفويض الأحداث ممكنًا - الأحداث تنتقل من الأبناء إلى الآباء عبر مرحلة الفقاعات.

الأخطاء الشائعة

الخلط بين querySelector و querySelectorAll: querySelector يُرجع عنصرًا واحدًا، querySelectorAll يُرجع جميع العناصر المطابقة.

استخدام innerHTML مع نص المستخدم: يسمح بهجمات XSS. استخدم textContent بدلاً من ذلك.

نسيان removeEventListener: أزل المستمعين دائمًا عند الانتهاء لمنع تسرب الذاكرة.

أفضل الممارسات

فضل querySelector/All: أكثر مرونة.

استخدم textContent بدلاً من innerHTML: لتجنب XSS.

استخدم تفويض الأحداث: للعناصر الديناميكية.

أزل المستمعين عند الانتهاء: لمنع تسرب الذاكرة.

في React، لا تعدّل DOM يدويًا: دع React يتعامل مع ذلك.

ملخص

DOM هو تمثيل شجري لمحتوى الصفحة يمكن لجافاسكريبت التفاعل معه.

الاختيار: getElementById و querySelector و querySelectorAll.

التعديل: textContent و innerHTML و classList و style.

الإنشاء/الحذف: createElement و appendChild و remove.

الأحداث: addEventListener للاستجابة لتفاعلات المستخدم.

تفويض الأحداث: مستمع واحد على الأب يتعامل مع جميع الأبناء.

في React: لا نعدّل DOM مباشرة - React يستخدم DOM افتراضيًا.

const countEl = document.getElementById("count"); let count = 0; document.getElementById("increase").addEventListener("click", () => { count++; countEl.textContent = count; }); document.getElementById("decrease").addEventListener("click", () => { count--; countEl.textContent = count; }); document.getElementById("reset").addEventListener("click", () => { count = 0; countEl.textContent = count; });