الوحدة 8: الـ DOM (Document Object Model) في JavaScript

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

الوحدة 8: الـ DOM (Document Object Model) في JavaScript

الدرس 1: مقدمة في الـ DOM

• المفهوم الأساسي: الـ DOM هو واجهة برمجة تطبيقات (API) تمثل صفحة الويب كمجموعة من العناصر المتداخلة التي يمكن التفاعل معها باستخدام JavaScript. في الواقع، يعتبر الـ DOM بمثابة هيكل شجري يعكس هيكل المستند.

1. ما هو الـ DOM؟

• الـ DOM هو تمثيل شجري للمحتوى في صفحة HTML أو XML، حيث يتم تحويل كل عنصر في الصفحة إلى عقدة (Node) في هذا الشجر.
• أنواع العقد في الـ DOM:
  • Element Node: يمثل عنصر HTML.
  • Text Node: يمثل النص داخل عنصر HTML.
  • Attribute Node: يمثل سمة (attribute) لعنصر HTML.

الدرس 2: كيفية الوصول إلى عناصر الـ DOM

• المفهوم: للوصول إلى عناصر الـ DOM، يمكنك استخدام عدة طرق توفرها JavaScript مثل getElementById() و getElementsByClassName().

1. الوصول إلى عنصر باستخدام getElementById()

• تستخدم هذه الطريقة للوصول إلى عنصر بناءً على معرّفه الفريد (id).
  html

  Copy code

  <div id="myDiv">مرحباً بالعالم</div>

  <script>
var element = document.getElementById("myDiv");
console.log(element); // <div id="myDiv">مرحباً بالعالم</div>
</script>


2. الوصول إلى عناصر باستخدام getElementsByClassName()

• تستخدم هذه الطريقة للوصول إلى جميع العناصر التي تحتوي على سمة class معينة.
  html

  Copy code

  <div class="myClass">عنصر 1</div>
  <div class="myClass">عنصر 2</div>

  <script>
var elements = document.getElementsByClassName("myClass");
console.log(elements); // [<div class="myClass">عنصر 1</div>, <div class="myClass">عنصر 2</div>]
</script>


3. الوصول إلى عناصر باستخدام querySelector() و querySelectorAll()

• querySelector(): يتيح لك الوصول إلى العنصر الأول الذي يطابق المحدد.
• querySelectorAll(): يتيح لك الوصول إلى جميع العناصر التي تطابق المحدد.
  html

  Copy code

  <div class="myClass">عنصر 1</div>
  <div class="myClass">عنصر 2</div>

  <script>
  var element = document.querySelector(".myClass");
  console.log(element); // <div class="myClass">عنصر 1</div>

  var elements = document.querySelectorAll(".myClass");
console.log(elements); // NodeList [<div class="myClass">عنصر 1</div>, <div class="myClass">عنصر 2</div>]
</script>


الدرس 3: التفاعل مع محتوى العناصر

• المفهوم: يمكنك التفاعل مع محتوى العناصر (مثل النص أو الخصائص) باستخدام JavaScript.

1. تعديل النص داخل عنصر

• يمكنك تغيير النص داخل عنصر باستخدام innerText أو textContent.
  html

  Copy code

  <div id="myDiv">مرحباً بالعالم</div>

  <script>
var element = document.getElementById("myDiv");
element.innerText = "تم تعديل النص!"; // تغيير النص داخل العنصر
</script>


2. تعديل HTML داخل عنصر

• يمكنك تغيير محتوى HTML داخل عنصر باستخدام innerHTML.
  html

  Copy code

  <div id="myDiv">مرحباً بالعالم</div>

  <script>
var element = document.getElementById("myDiv");
element.innerHTML = "<strong>تم تعديل النص باستخدام HTML!</strong>"; // تغيير HTML داخل العنصر
</script>


الدرس 4: تعديل خصائص العناصر

• المفهوم: يمكن تعديل خصائص عناصر الـ DOM باستخدام JavaScript.

1. تعديل السمات (Attributes)

• يمكنك تغيير السمة (attribute) لأي عنصر باستخدام setAttribute() أو الوصول إليها باستخدام getAttribute().
  html

  Copy code

  <img id="myImage" src="image1.jpg" alt="صورة">

  <script>
var image = document.getElementById("myImage");
image.setAttribute("src", "image2.jpg"); // تغيير مسار الصورة
console.log(image.getAttribute("src")); // "image2.jpg"
</script>


2. إضافة وإزالة السمات

• يمكن إضافة أو إزالة السمات باستخدام setAttribute() و removeAttribute().
  html

  Copy code

  <a id="myLink" href="https://www.example.com">رابط</a>

  <script>
var link = document.getElementById("myLink");
link.setAttribute("target", "_blank"); // إضافة سمة target
link.removeAttribute("href"); // إزالة سمة href
</script>


الدرس 5: إضافة وحذف عناصر الـ DOM

• المفهوم: يمكنك إضافة أو حذف عناصر من الصفحة باستخدام JavaScript.

1. إنشاء عنصر جديد

• يمكنك إنشاء عنصر جديد باستخدام createElement() وإضافته إلى الصفحة باستخدام appendChild() أو insertBefore().
  html

  Copy code

  <div id="parentDiv"></div>

  <script>
var parent = document.getElementById("parentDiv");
var newDiv = document.createElement("div"); // إنشاء عنصر div جديد
newDiv.innerHTML = "تم إضافة عنصر جديد";
parent.appendChild(newDiv); // إضافة العنصر الجديد إلى العنصر الأب
</script>


2. حذف عنصر

• يمكنك حذف عنصر باستخدام removeChild().
  html

  Copy code

  <div id="parentDiv">
  <div id="childDiv">عنصر سيتم حذفه</div>
  </div>

  <script>
var parent = document.getElementById("parentDiv");
var child = document.getElementById("childDiv");
parent.removeChild(child); // حذف العنصر من الصفحة
</script>


الدرس 6: التعامل مع الأحداث في الـ DOM

• المفهوم: يمكنك التعامل مع الأحداث في الـ DOM باستخدام JavaScript لربط الأحداث مثل النقر أو الكتابة في الحقول.

1. ربط حدث مع عنصر

• يمكنك ربط حدث مع عنصر باستخدام addEventListener().
  html

  Copy code

  <button id="myButton">اضغط هنا</button>

  <script>
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("تم النقر على الزر!");
});
</script>


الدرس 7: التنقل عبر الـ DOM

• المفهوم: يمكنك التنقل عبر عناصر الـ DOM باستخدام بعض الخصائص مثل parentNode, childNodes, nextSibling, و previousSibling.

1. التنقل إلى العنصر الأب

• للوصول إلى العنصر الأب باستخدام parentNode.
  html

  Copy code

  <div id="parent">
  <div id="child">عنصر الابن</div>
  </div>

  <script>
var child = document.getElementById("child");
var parent = child.parentNode; // الوصول إلى العنصر الأب
console.log(parent.id); // "parent"
</script>


2. التنقل إلى العناصر الشقيقة

• للوصول إلى العناصر الشقيقة باستخدام nextSibling و previousSibling.
  html

  Copy code

  <div id="parent">
  <div id="firstChild">الطفل الأول</div>
  <div id="secondChild">الطفل الثاني</div>
  </div>

  <script>
var firstChild = document.getElementById("firstChild");
var nextSibling = firstChild.nextSibling; // الوصول إلى العنصر التالي
console.log(nextSibling.id); // "secondChild"
</script>


الدرس 8: تلخيص الوحدة

• الـ DOM: هو تمثيل شجري للمحتوى في صفحة HTML أو XML يمكن التفاعل معه باستخدام JavaScript.
• الوصول إلى العناصر: يمكن الوصول إلى العناصر باستخدام getElementById(), getElementsByClassName(), و querySelector().
• التفاعل مع المحتوى والخصائص: يمكن تعديل النصوص والـ HTML والسمات باستخدام innerText, innerHTML, setAttribute(), و getAttribute().
• إضافة وحذف العناصر: يمكن إضافة وحذف العناصر باستخدام createElement(), appendChild(), و removeChild().
• التعامل مع الأحداث: يمكن ربط الأحداث مع العناصر باستخدام addEventListener().
• التنقل عبر الـ DOM: يمكن التنقل عبر العناصر باستخدام parentNode, nextSibling, و previousSibling.

المشاريع العملية للوحدة 8:

• مشروع 1: بناء صفحة تحتوي على نموذج بسيط يتفاعل مع المستخدم عبر الـ DOM لتغيير النصوص بناءً على المدخلات.
• مشروع 2: تصميم صفحة تحتوي على قائمة من العناصر، وعند النقر على كل عنصر، يتم تعديل محتواه أو حذفه.
• مشروع 3: إنشاء تطبيق بسيط يتفاعل مع أحداث الماوس باستخدام mouseover, mouseout, و click لتغيير أنماط الصفحة.