إن هذه الصفحة التي تراها .. من أزرار وروابط وصور ومساحات (div & span) وجداول، يمكن تمثيلها بطريقتين:

فأما الأولى، Markup وأشهرها HTML و XML-XSLT وهذا التمثيل هو الذي المُعتمد في التواصل بين المتصفحات والسيرفرات، وهذه الطريقة في التمثيل نصيّة (Document) ، بمعنى أنه لا يوجد له هيكل بيانات يمكن التعامل معه بسهولة، إذ تحتاج لاستنباط البيانات إلى Parser يقوم بقراءة البيانات لإخراج النتائج المرادة، ولكي يصبح التعامل معه سهلاً وسريعاً تم اختراع تمثيل آخر هو DOM.

وهي الطريقة الثانية في التمثيل DOM أو Document Object Model، فهذه الطريقة تقوم بتحويل النص أو الوثيقة Document إلى تمثيل كائني Object Model، وهذا التمثيل يستخدم هيكلًا بيانيًا شجريًا Tree Structure ونمطًا تصميميًا مركبًا Composite Design Pattern، وهو محايد للغات البرمجة، ويمكن التعديل عليه ديناميكيًا.

فعندما تقوم باستكشاف عنصر في الصفحة Inspect Element فإن المتصفح يستخرج لك ذلك العنصر من التمثيل الكائني، ويعرض لك التمثيل النصي له HTML & CSS والارتباطات البرمجية معه Events.

وأهمية الـDOM أنه سهل التعامل معه برمجياً، وسريع نسبياً [١]، ولأنه تمثيل كائني فإنه الطريقة الأفضل للتعامل مع الصفحة ديناميكيًا، وبأي لغة برمجة؛ فعلى المتصفح أشهر لغة برمجة مدعومة هي الجافاسكريبت، وفي Chrome يمكن استخدام Dust أيضاً.

وعلى السيرفرات يمكن استخدام أي لغة برمجة للتعامل معه، ففي الـPHP لديهم DOMDocument [٢]، وفي الجافا يمكن التعامل معه عن طريق JAXP [٣]، و Xerces في الـسي بلس بلس والبيرل والجافا أيضاً [٤] وهكذا.

--

[١] أبطأ شيء في المتصفح ليس معالجة أوامر الجافاسكريبت، بل التعديل على الـDOM، فقد تتطورت محركات لغة الجافاسكريبت لدرجة أنها تنافس لغة C في بعض الحالات، ولكن بقيت معضلة الـDOM لذلك بدأت منظمة الويب بالعمل على تجزئة هذا التمثيل عن طريق Shadow DOM وهي الطريقة التي تستخدمها مكتبة ReactJS للوصول إلى أداء عالٍ في التعديل على الـDOM

[٢]

[٣]

[٤]

DOM هي إختصار للـ Document Object Model أي "نموذج كائن الوثيقة" أو بمعنى أخر الطريقة التي يتم بها إنشاء تخطيط لهيكلة وثيقة HTML لسهولة التعامل معها عبر javaScript.

فـالـ javaScript لغة برمجية تعمل على المتصفح.

والـ javaScript DOM الطريقة التي تتعامل بها لغة javaScript مع هيكلة صفحات الـ HTML.