DOM (Document Object Model) هو تمثيل صفحة HTML على هيئة كائنات يمكن لـJavaScript قراءتها وتعديلها. وهكذا تُغيَّر الصفحة مباشرة.

اختيار عنصر

• document.querySelector("h1") — أول عنصر مطابق.
• document.getElementById("titre") — عنصر بحسب معرّفه.

تعديل عنصر

const title = document.querySelector("h1");
title.textContent = "عنوان جديد!";
title.style.color = "blue";

وبذلك يمكنك أن:

• تغيّر النص عبر textContent.
• تعدّل النمط عبر style.
• تضيف أصنافًا أو تحذفها عبر classList.

وبالجمع بين الاختيار والأحداث وتعديل DOM تجعل الصفحة ديناميكية فعلًا: فنقرة واحدة قد تعرض رسالة، أو تغيّر لونًا، أو تكشف محتوى مخفيًا.

للتذكّر: اختر عنصرًا ثم عدّل نصه أو نمطه. إن DOM هو الجسر بين شيفرتك والصفحة المعروضة.