جافا سكريبت: التعامل مع DOM والأحداث – الإعلام الآلي — السنة الأولى ثانوي (جذع مشترك علوم وتكنولوجيا) — المنهاج الجزائري

جافا سكريبت: التعامل مع DOM والأحداث

DOM (Document Object Model) هو تمثيل شجري لصفحة HTML. تسمح JavaScript بالتلاعب بالDOM لتغيير محتوى وتصميم الصفحة.

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

document.getElementById(“id”): الوصول بعنصر حسب المعرف.
document.getElementsByClassName(“class”): الوصول بعناصر حسب الصنف.
document.querySelector(“selector”): الوصول بأول عنصر يطابق المحدد.

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

element.innerHTML = “نص جديد”: تغيير المحتوى.
element.style.color = “red”: تغيير التصميم.
element.classList.add(“new-class”): إضافة صنف.
element.setAttribute(“src”, “image.jpg”): تغيير خاصية.

التعامل مع الأحداث

element.addEventListener(“click”, function): إضافة مستمع حدث.
أحداث شائعة: click, mouseover, mouseout, keydown, submit, load.

مثال

document.getElementById(“btn”).addEventListener(“click”, function() {
document.getElementById(“msg”).innerHTML = “تم النقر!”;
});

تمارين

تمرين 1: اكتب كوداً يغير لون خلفية الصفحة عند النقر على زر.
تمرين 2: أنشئ قائمة منسدلة تظهر عند النقر.

للمزيد: راجع درس تطوير الويب: مقدمة في JavaScript ودرس HTML: لغة ترميز النص التشعبي.