عندما يقرأ المتصفح ملف HTML يحوّله إلى بنية شجرية في الذاكرة. وكل وسم، كالعنوان والفقرة والزر، «عقدة» في هذه الشجرة. وتُسمّى هذه الشجرة DOM. ومن خلال DOM تستطيع جافا سكريبت إيجاد العناصر وتغيير نصوصها أو حذفها أو إضافة عناصر جديدة، ويحدّث المتصفح الصفحة فوراً.
مثال#
<p id="msg">مرحباً</p>document.getElementById("msg").textContent = "أهلاً بك";بهذه الشيفرة يتغير نص الفقرة دون تحديث الصفحة. وعندما يرتفع رقم سلة التسوق في المتجر بعد إضافة سلعة، فعادةً حدث هذا في DOM.
الفرق عن HTML#
HTML هو الملف النصي الأولي. أما DOM فنسخته الحية القابلة للتغيير في المتصفح. وإذا أُضيف محتوى بجافا سكريبت فهو موجود في DOM لكنه غير موجود في ملف HTML الأصلي. ولهذا يختلف أحياناً «عرض مصدر الصفحة» عمّا تراه في أدوات المطوّر.
لماذا هو مهم#
- هو أساس كل التفاعلات الديناميكية في الصفحة
- بُنيت مكتبات مثل React وVue لتسريع تحديث DOM، لأن كثرة تغييره المتتالية قد تبطئ الصفحة
- تعرض أدوات مطوّر المتصفح (تبويب Elements) شجرة DOM وهي مفيدة جداً في التنقيح
نصيحة عملية#
قد يخفّض DOM الكبير ذو العقد الكثيرة جداً سرعة الصفحة. أبقِ بنية HTML بسيطة.