JavaScript: مقدمة في DOM

آخر تحديث: 2026-10-13

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

1. شجرة DOM وكائن document

DOM يعني نموذج كائن المستند (Document Object Model). عندما يحمّل المتصفح HTML، لا يخزنه كنص عادي — يترجمه إلى شجرة كائنات. كل وسم HTML يصبح كائن (يسمى عقدة)، والعلاقات المتداخلة بين الأوسام تصبح علاقات أبو-ابن في الشجرة.

فكّر في DOM كشجرة مقلوبة: في الأعلى تماماً الجذر (document)، يتفرع إلى أغصان (html، head، body)، ثم إلى أوراق (div، p، span...).

(2) هيكل شجرة DOM

شجرة DOM لصفحة HTML بسيطة تبدو تقريباً هكذا:

HTML

document
  └── html
       ├── head
       │    ├── meta
       │    └── title
       └── body
            ├── h1
            ├── p
            └── div
                 └── span

document هو العقدة الجذر لشجرة DOM ونقطة دخول JS للوصول إلى DOM
html هو عنصر الابن الوحيد لـ document (عنصر المستند)
head و body هما عنصر الابن لـ html
من هناك، يستمر التداخل طبقة بطبقة لتشكيل الشجرة الكاملة

(3) أنواع العقد

هناك ثلاثة أنواع أساسية من العقد في DOM:

نوع العقد	الوصف	قيمة nodeType
عقدة عنصر	وسم HTML، مثل `p`، `div`	1
عقدة نص	محتوى النص داخل الوسم	3
عقدة سمة	سمة الوسم، مثل `class`، `id`	2 (مهمل للاستخدام العام)

HTML

<p class="intro">مرحباً بالعالم</p>

في هذا السطر الواحد: <p> هو عقدة عنصر، class="intro" هو عقدة سمة، و مرحباً بالعالم هو عقدة نص. في التطوير اليومي، عقد العناصر هي ما ستعمل معه أكثر.

(4) كائن document

document هو نقطة الدخول إلى DOM — المتصفح يوفر هذا الكائن العام تلقائياً. من خلاله يمكنك:

الوصول إلى عناصر الصفحة: document.getElementById()، document.querySelector()
إنشاء عناصر جديدة: document.createElement()
قراءة وكتابة محتوى الصفحة: document.title، document.body
الاستماع لأحداث الصفحة: document.addEventListener()

(5) ماذا يفعل DOM

JS نفسها لا يمكنها "رؤية" صفحة الويب — يمكنها فقط الحساب. DOM يوفر "العيون" و"الأيدي":

قراءة: الحصول على النصوص والسمات والأنماط من الصفحة
تعديل: تغيير محتوى النص وقيم السمات وأنماط CSS
إضافة: إنشاء عناصر جديدة وإدراجها في الصفحة
إزالة: إزالة العناصر من الصفحة
استماع: الاستجابة لنقرات المستخدم والإدخال والتفاعلات الأخرى

بدون DOM، ستكون JS و HTML شيئين منفصلين تماماً. DOM يربطهما.

❓ أسئلة شائعة

س هل DOM جزء من JavaScript؟

ج لا. DOM هو معيار يحدده W3C. JavaScript فقط يوفر APIs للتفاعل معه. Node.js ليس لديها DOM لأنها ليست بيئة متصفح. الخلط بين DOM و JS هو سوء فهم شائع للمبتدئين.

س لماذا هناك عقد نصية فارغة في childNodes؟

ج فواصل الأسطر والمسافات في HTML تُحلل كعقد نصية في DOM. مثلاً، المسافة البيضاء بين وسمين تصبح عقدة نصية (تحتوي على حرف سطر جديد). إذا أردت فقط عقد العناصر، استخدم children بدلاً من childNodes.

س هل تعديل DOM يؤثر على أداء الصفحة؟

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

📖 ملخص

DOM هو تمثيل شجري لـ HTML؛ كل وسم هو عقدة DOM
document هو مدخل DOM؛ document.getElementById() يجد العناصر بالمعرّف
document.querySelector() يستخدم محددات CSS لأول تطابق؛ querySelectorAll للكل
أنواع العقد: عقد العناصر (وسوم HTML)، عقد النص (المحتوى)، عقد الخصائص (خصائص الوسم)
عمليات DOM الأساسية: إيجاد العقد، قراءة الخصائص، تعديل المحتوى، إضافة/إزالة العقد الفرعية

📝 تمارين

افتح أدوات المتصفح (F12)، اكتب console.dir(document) في Console، واستكشف خصائص وطرق كائن document. اذكر 5 تعرفها أو تجدها مثيرة.
اكتب كوداً يحصل على عنصر body للصفحة الحالية، يطبع childElementCount (عدد عناصر الأبناء)، ثم يستخدم children للمرور على جميع عناصر الأبناء ويطبع اسم وسم كل منها.
اشرح الفرق بين "عقد العناصر" و"عقد النص". بالنظر إلى <div>مرحباً <b>بالعالم</b></div>، ارسم هيكل شجرة العقد وحدد نوع كل عقدة.

فريق Web-Tutorial التقني

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

من نحن