الدرس الثالث عشر: التعامل مع DOM في JavaScript

الـ DOM (اختصارًا لـ Document Object Model) هو الهيكل الهرمي للصفحة، ويتيح لك التفاعل مع عناصر HTML وتعديلها باستخدام JavaScript.

---

1. ما هو DOM؟

تقوم المتصفحات بتحويل صفحة HTML إلى شجرة من العناصر (Nodes)، ويمكنك باستخدام JavaScript:

• الوصول لأي عنصر
• تغيير النص أو التنسيق
• إضافة أو حذف عناصر
• التعامل مع الأحداث

---

2. الوصول إلى العناصر

باستخدام getElementById

<p id="message">مرحبًا</p>

<script>
  let msg = document.getElementById("message");
  console.log(msg.textContent); // مرحبًا
</script>

---

باستخدام querySelector (أقوى وأكثر مرونة)

<p class="info">نص</p>

<script>
  let element = document.querySelector(".info"); // مثل CSS Selector
  console.log(element.textContent);
</script>

---

3. تغيير المحتوى

element.textContent = "تم التعديل";
element.innerHTML = "<strong>نص غامق</strong>";

---

4. تغيير الخصائص والأنماط

element.style.color = "red";
element.style.fontSize = "20px";
element.id = "newId";
element.className = "box";

---

5. إنشاء عناصر وإضافتها

let newDiv = document.createElement("div");
newDiv.textContent = "عنصر جديد";
document.body.appendChild(newDiv); // يضيفه لصفحة HTML

---

6. إزالة عناصر

element.remove(); // يحذف العنصر من الصفحة

---

✅ ملخص الدرس:

• DOM هو واجهة JavaScript للتحكم في الصفحة.
• يمكن الوصول للعناصر وتغيير محتواها أو شكلها.
• getElementById, querySelector من أشهر الطرق.
• يمكنك إنشاء أو حذف عناصر من الصفحة برمجيًا.