ما هو الـ DOM؟ وكيف يتم تمثيل صفحة HTML في ذاكرة المتصفح؟
إذا كنت قد بدأت في تعلم تطوير الويب، فمن المؤكد أنك سمعت مصطلح DOM يتردد كثيراً، خاصة عند الحديث عن لغة JavaScript. يُعتبر الـ DOM هو الجسر الذي يربط بين الأكواد الجامدة التي تكتبها في ملف HTML وبين الصفحة التفاعلية التي يراها المستخدم.
في هذا الدليل الشامل، سنشرح مفهوم Document Object Model بعمق، وكيف يحول المتصفح نصوص الكود إلى شجرة من الكائنات في الذاكرة، مع توضيح أهميته في بناء المواقع الحديثة.
1. تعريف الـ DOM (Document Object Model)
الـ DOM هو اختصار لـ Document Object Model أو "نموذج كائن المستند". ببساطة، هو واجهة برمجة تطبيقات (API) للمستندات من نوع HTML و XML.
عندما يقوم المتصفح بتحميل صفحة ويب، فإنه لا يكتفي بعرض الكود كما هو، بل يقوم بإنشاء تمثيل منطقي لهذه الصفحة في الذاكرة. هذا التمثيل يسمح للغات البرمجة (مثل JavaScript) بالوصول إلى محتوى الصفحة، وتغيير هيكلها، أو تعديل أنماطها (Styles) بشكل ديناميكي.
2. كيف يُمثّل الـ DOM صفحة HTML في الذاكرة؟
يعتمد الـ DOM على هيكل يسمى "شجرة الـ DOM" (DOM Tree). تخيل أن صفحة الويب هي شجرة مقلوبة، حيث يكون الجذع هو المستند بالكامل، وتتفرع منه الأغصان (العناصر) والأوراق (النصوص والصور).
مراحل تحويل الكود إلى DOM:
-
التحليل (Parsing): يقرأ المتصفح ملف الـ HTML سطراً بسطر.
-
تحويل الرموز (Tokenization): يتم تحويل الأكواد (مثل
<div>أو<img>) إلى رموز برمجية. -
إنشاء العقد (Nodes): يتم تحويل كل رمز إلى "كائن" (Object) يسمى عقدة (Node).
-
بناء الشجرة (Tree Construction): يتم ربط هذه العقد ببعضها البعض بناءً على علاقة (الأب والابن) الموجودة في الكود.
3. أنواع العقد (Nodes) في شجرة الـ DOM
لا يقتصر الـ DOM على الأوسمة (Tags) فقط، بل يتكون من عدة أنواع من العقد:
| نوع العقدة (Node Type) | الوصف | مثال |
| Document Node | العقدة الجذرية التي تمثل المستند بالكامل. | window.document |
| Element Node | تمثل وسوم الـ HTML. | <div>, <h1>, <body> |
| Attribute Node | تمثل الخصائص داخل الوسوم. | class="container", id="btn" |
| Text Node | تمثل النصوص الفعلية الموجودة داخل العناصر. | "أهلاً بك في موقعنا" |
| Comment Node | تمثل التعليقات التي تكتبها في الكود. | <!-- تعليق --> |
4. الفرق بين كود الـ HTML والـ DOM
من الأخطاء الشائعة الاعتقاد بأن الـ DOM هو نفسه كود الـ HTML الذي كتبته. هناك فروق جوهرية:
-
HTML: هو الكود النصي المخزن في ملفك، وهو ثابت لا يتغير إلا إذا قمت بتعديل الملف يدوياً.
-
DOM: هو كائن حي موجود في ذاكرة المتصفح (RAM)، يتغير لحظياً عند تفاعل المستخدم (مثل الضغط على زر لإظهار قائمة).
ملاحظة: إذا كتبت كود HTML خاطئاً (مثلاً نسيت إغلاق وسم
</table>)؛ فإن المتصفح يقوم بإصلاحه تلقائياً عند بناء الـ DOM.
5. لماذا يُعد الـ DOM مهماً جداً؟
بدون الـ DOM، ستكون صفحات الويب عبارة عن نصوص جامدة. تكمن أهميته في:
-
التفاعلية: يسمح لـ JavaScript بتغيير المحتوى دون إعادة تحميل الصفحة.
-
التحكم في الستايل: يمكنك تغيير الألوان والخطوط بناءً على أفعال المستخدم.
-
التعامل مع الأحداث (Events): مثل مراقبة متى يضغط المستخدم على "إرسال" أو متى يحرك الفأرة.
6. مقارنة بين الـ DOM والـ Virtual DOM
مع ظهور مكتبات مثل React، ظهر مصطلح Virtual DOM. إليك الفرق:
| وجه المقارنة | Real DOM | Virtual DOM |
| سرعة التحديث | بطيء نسبياً عند التعامل مع تحديثات كثيرة. | سريع جداً. |
| طريقة العمل | يقوم بتحديث الشجرة بالكامل عند حدوث تغيير. | يحدّث فقط الأجزاء التي تغيرت فعلياً. |
| الذاكرة | يستهلك ذاكرة أكثر مع الصفحات الضخمة. | يستهلك ذاكرة أقل لأنه نسخة خفيفة. |
7. كيفية الوصول إلى الـ DOM باستخدام JavaScript
يمكن للمبرمجين "اصطياد" العناصر في الذاكرة باستخدام دوام محددة، مثل:
-
document.getElementById(): للوصول لعنصر عبر معرفه. -
document.querySelector(): للوصول لعنصر باستخدام محددات CSS. -
document.createElement(): لإنشاء عنصر جديد تماماً وإضافته للشجرة.
الأسئلة الشائعة حول الـ DOM (FAQ)
1. هل الـ DOM خاص بلغة JavaScript فقط؟
لا، الـ DOM تم تصميمه ليكون مستقلاً عن لغات البرمجة. يمكن للغات أخرى مثل Python أو PHP التعامل معه، ولكن JavaScript هي الأكثر استخداماً لأنها تعمل داخل المتصفح مباشرة.
2. هل يؤثر حجم الـ DOM على سرعة الموقع؟
نعم، كلما زاد عدد العقد (Nodes) في الشجرة، زاد استهلاك الذاكرة وبطء معالجة المتصفح للتغييرات. يُنصح دائماً بتقليل عمق الشجرة (DOM Depth).
3. ماذا يحدث للـ DOM عند إغلاق المتصفح؟
يتم مسح الـ DOM تماماً من الذاكرة العشوائية (RAM)، فهو موجود فقط طالما أن الصفحة مفتوحة.
4. هل الـ CSS جزء من الـ DOM؟
هناك ما يسمى بـ CSSOM (CSS Object Model)، وهو مشابه للـ DOM ولكنه خاص بتنسيقات الصفحة. يندمج الـ DOM مع الـ CSSOM لتكوين ما يسمى بـ Render Tree التي تظهر للمستخدم.
خاتمة
باختصار، الـ DOM هو اللغة التي يفهم بها المتصفح كود الـ HTML الخاص بك ليحوله إلى واجهة تفاعلية. فهمك لكيفية تمثيله في الذاكرة يجعلك مبرمجاً أفضل، قادراً على كتابة أكواد أكثر كفاءة وسرعة. تذكر دائماً أن الـ DOM ليس مجرد كود، بل هو كائن حي يتنفس داخل الذاكرة مع كل نقرة يقوم بها المستخدم.
