ما هو DOM في JavaScript؟ وكيف تتحكم في عناصر الصفحة خطوة بخطوة

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

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

ما معنى DOM؟

DOM اختصار Document Object Model. عندما يفتح المتصفح صفحة HTML، يحولها إلى شجرة من العقد (Nodes). كل عنصر مثل <h1> أو <p> يصبح كائناً يمكن الوصول إليه وتعديله.

1) كائن document هو نقطة البداية

console.log(document.title);
console.log(document.URL);

ماذا يفعل هذا الكود؟ يقرأ بيانات عامة من الصفحة الحالية.

النتيجة المتوقعة: يظهر عنوان الصفحة ورابطها في الـ Console.

خطأ شائع: تشغيل الكود في بيئة لا تحتوي متصفح (مثل Node.js) ثم توقع وجود document.

2) أول تعديل فعلي على الصفحة

document.body.style.backgroundColor = "#f8fbff";

ماذا يفعل هذا الكود؟ يغير لون خلفية الصفحة مباشرة.

النتيجة المتوقعة: ترى التغيير فور تنفيذ السطر.

خطأ شائع: كتابة اسم خاصية CSS بشرطة مثل background-color بدل backgroundColor.

3) مثال أوضح: تغيير عنوان الصفحة

document.title = "JavaScript DOM Lesson";

ماذا يفعل هذا الكود؟ يعدل نص عنوان التبويب في المتصفح.

النتيجة المتوقعة: اسم التبويب يتغير فوراً.

خطأ شائع: الخلط بين document.title (عنوان التبويب) و<h1> (عنوان داخل الصفحة).

4) كيف يفكر DOM؟ (فكرة العقد Nodes)

كل شيء تقريباً داخل الصفحة يعتبر عقدة:

• العناصر HTML مثل div وp.
• النصوص داخل العناصر.
• الخصائص مثل id وclass.

هذا مهم لأن JavaScript تتعامل مع هذه العقد ككائنات: تقرأها، تغيّرها، أو تضيف/تحذف منها.

مثال تطبيقي صغير (HTML + JavaScript)

<h1 id="title">مرحبا</h1>
<script>
  const t = document.getElementById("title");
  t.textContent = "مرحبا بك في DOM";
</script>

ماذا يفعل هذا الكود؟ يحدد عنصر العنوان ثم يغيّر النص داخله.

النتيجة المتوقعة: يتحول النص من "مرحبا" إلى "مرحبا بك في DOM".

خطأ شائع: تنفيذ الكود قبل تحميل العنصر فيظهر null.

Story قصيرة: صفحة ثابتة أصبحت تفاعلية

متعلم بنى صفحة HTML جميلة لكنها ثابتة. بعد فهم DOM، صار يغير الرسائل والألوان حسب أفعال المستخدم. نفس الصفحة أصبحت "حية" بدون إعادة تحميل.

لماذا DOM مهم فعلياً في المشاريع؟

• تعديل المحتوى بدون إعادة تحميل الصفحة.
• ربط الأزرار والنماذج بأحداث المستخدم.
• بناء واجهات تفاعلية ديناميكية.
• إظهار الأخطاء والتنبيهات لحظياً.

Checklist سريعة

• أفهم أن DOM هو تمثيل HTML كشجرة.
• أعرف أن document هي نقطة الدخول الأساسية.
• أستطيع تنفيذ تعديل بسيط مثل تغيير title أو لون الخلفية.
• أدرك أن ترتيب تحميل العناصر يؤثر على نجاح التحديد.

الأسئلة الشائعة — FAQ

ما هو DOM باختصار؟

هو نموذج يجعل عناصر الصفحة قابلة للوصول والتعديل عبر JavaScript.

هل DOM جزء من JavaScript؟

لا، هو API من المتصفح. JavaScript هي اللغة التي تتعامل معه.

ما أول شيء أتعلمه بعد مقدمة DOM؟

تعلم اختيار العناصر (DOM Selection) لأنه أساس أي تعديل لاحق.

للمراجعة: String Methods ثم تابع التسلسل: DOM Elements.