الدرس الثامن والعشرون: التحكم في عناصر HTML باستخدام JavaScript (DOM Manipulation)

 تمنحك JavaScript القدرة على الوصول إلى عناصر HTML وتعديلها أو حذفها أو حتى إنشائها ديناميكيًا. هذا يتم عبر ما يُسمى DOM - Document Object Model.

---

1. الوصول إلى عناصر HTML

باستخدام getElementById:

<p id="myText">نص قابل للتغيير</p>

<script>
  let text = document.getElementById("myText");
  text.textContent = "تم تغيير النص!";
</script>

باستخدام querySelector:

let heading = document.querySelector("h1");
heading.style.color = "blue";

---

2. تغيير خصائص العناصر

<img id="myImg" src="old.jpg" alt="صورة">

<script>
  let img = document.getElementById("myImg");
  img.src = "new.jpg";
  img.alt = "تم تغيير الصورة";
</script>

---

3. تغيير التنسيقات (CSS) عبر JavaScript

<div id="box">مربع</div>

<script>
  let box = document.getElementById("box");
  box.style.backgroundColor = "lightgreen";
  box.style.padding = "20px";
  box.style.borderRadius = "10px";
</script>

---

4. إنشاء عناصر ديناميكيًا

<div id="container"></div>

<script>
  let container = document.getElementById("container");

  let newElement = document.createElement("p");
  newElement.textContent = "تمت إضافة هذا النص باستخدام JavaScript";
  container.appendChild(newElement);
</script>

---

5. حذف عنصر من الصفحة

let element = document.getElementById("box");
element.remove();  // يحذف العنصر من DOM

---

✅ ملخص الدرس:

الوظيفة	الاستخدام
getElementById	الوصول إلى عنصر حسب الـ ID
querySelector	تحديد أي عنصر باستخدام CSS
.textContent / .innerHTML	تغيير محتوى العنصر
.style.property	تعديل تنسيق العنصر مباشرة
createElement	إنشاء عنصر جديد
appendChild / remove	إضافة أو حذف عنصر من DOM