151- دروس جافا سكربت – تدريب على امثله – JS Examples For HTML DOM

### شرح مفصل لـ JS Examples For HTML DOM

تُعتبر لغة JavaScript واحدة من أكثر اللغات شيوعًا في تطوير تطبيقات الويب، حيث تُمكِّن المطورين من التفاعل مع محتوى صفحات الويب وتحسين تجربة المستخدم. واحدة من أهم الميزات التي توفرها JavaScript هي القدرة على التعامل مع نموذج كائن المستند (DOM)، وهو عبارة عن تمثيل برمجي لهيكل HTML أو XML. في هذا المقال، سنقوم بشرح بعض الأمثلة العملية لكيفية استخدام JavaScript للتفاعل مع HTML DOM.

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

أول خطوة في التعامل مع DOM هي القدرة على الوصول إلى العناصر المختلفة في صفحة الويب. يمكننا استخدام عدة طرق لتحقيق ذلك:

– باستخدام `getElementById`:

var element = document.getElementById("myElementId");
  

هذا المثال يُظهر كيفية الحصول على عنصر HTML باستخدام المعرف الفريد الخاص به.

– باستخدام `getElementsByClassName`:

var elements = document.getElementsByClassName("myClassName");
  

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

– باستخدام `querySelector` و`querySelectorAll`:

var firstElement = document.querySelector(".myClassName");
  var allElements = document.querySelectorAll(".myClassName");
  

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

#### 2. تعديل محتوى العناصر

بعد الوصول إلى العناصر، يمكن تعديل المحتوى الداخلي لها:

– تغيير النص الداخلي:

var paragraph = document.getElementById("myParagraph");
  paragraph.textContent = "تم تغيير النص!";
  

– تعديل HTML الداخلي:

var container = document.getElementById("myContainer");
  container.innerHTML = "<span>محتوى HTML جديد</span>";
  

#### 3. التعامل مع خصائص العناصر

يمكن أيضًا تعديل خصائص العناصر مثل السمات (attributes):

– تغيير سمة:

var image = document.getElementById("myImage");
  image.setAttribute("src", "newImage.jpg");
  

– إزالة سمة:

image.removeAttribute("alt");
  

#### 4. إضافة وحذف عناصر

الـ DOM يتيح لك أيضًا القدرة على إنشاء وحذف العناصر:

– إضافة عنصر جديد:

var newElement = document.createElement("div");
  newElement.textContent = "عنصر جديد";
  document.body.appendChild(newElement);
  

– حذف عنصر:

var elementToRemove = document.getElementById("elementToRemove");
  elementToRemove.parentNode.removeChild(elementToRemove);
  

#### 5. التعامل مع [شركة برمجة مصرية] الأحداث

التفاعل مع المستخدمين من خلال الأحداث هو جزء أساسي من تطوير الويب:

– إضافة حدث نقر:

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

– إزالة حدث:

button.removeEventListener("click", myFunction);
  

#### الخاتمة

تعامل JavaScript مع HTML DOM يعتبر من الأدوات القوية التي تتيح للمطورين إنشاء صفحات ويب تفاعلية وديناميكية. من خلال الوصول إلى العناصر وتعديلها والتفاعل مع الأحداث، يمكن تحسين تجربة المستخدم بشكل كبير. نأمل أن تكون هذه الأمثلة قد أوضحت لك كيفية البدء في استخدام JavaScript مع DOM لتحقيق أهدافك في تطوير الويب.