ما هو DOM؟

DOM اختصار لـ Document Object Model
وهو تمثيل الصفحة في شكل كائنات (Objects) يمكن لجافاسكربت التعامل معها.

1) اختيار العناصر (Selecting Elements)

const title = document.getElementById("main-title");
const items = document.querySelectorAll(".item");

2) تغيير المحتوى (Changing Content)

document.getElementById("main-title").textContent = "مرحبا يا أسامة!";

3) تغيير الأنماط (Styling Elements)

title.style.color = "blue";
title.style.fontSize = "30px";

4) إضافة عنصر جديد للصفحة

const p = document.createElement("p");
p.textContent = "تم إضافة فقرة جديدة بالجافاسكربت";
document.body.appendChild(p);

5) التعامل مع الأحداث (Events)

document.getElementById("btn").addEventListener("click", () => {
  alert("تم الضغط على الزر!");
});

خلاصة

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