نموذج كائن المستند

📅 آخر تحديث: ٢٤ يوليو ٢٠٢٦
✍️ نُشر في: ٢٤ يوليو ٢٠٢٦
📷 يحتوي على 1 صور
الموسوعة الحرة

نموذج كائن المستند ( DOM ) هو واجهة برمجة تطبيقات (API) متعددة المنصات [ 2 ] ومستقلة عن لغة البرمجة ، تتعامل مع مستند HTML أو XML كهيكل شجري ، حيث يمثل كل عقدة كائنًا يمثل جزءًا من المستند. يُمثل DOM المستند بشجرة منطقية. ينتهي كل فرع من فروع الشجرة بعقدة، وتحتوي كل عقدة على كائنات. تتيح طرق DOM الوصول البرمجي إلى الشجرة؛ ومن خلالها يمكن تغيير بنية المستند أو نمطه أو محتواه. [ 2 ] يمكن ربط معالجات الأحداث (المعروفة أيضًا باسم مستمعي الأحداث) بالعقد. بمجرد تشغيل حدث ما، يتم تنفيذ معالجات الأحداث. [ 3 ]

تولى اتحاد شبكة الويب العالمية (W3C) مهمة وضع المعايير الأساسية لنموذج كائن المستند (DOM)، وكان آخر إصدار لتوصياته في عام 2004. ثم تولت مجموعة عمل نموذج كائن المستند (WHATWG) تطوير المعيار، ونشرته كوثيقة حية . وينشر اتحاد شبكة الويب العالمية (W3C) الآن نسخًا مستقرة من معيار مجموعة عمل نموذج كائن المستند (WHATWG).

في نموذج كائن المستند (DOM) في لغة HTML، كل عنصر هو عقدة : [ 4 ]

  • المستند هو عقدة مستند.
  • جميع عناصر HTML هي عقد عناصر.
  • جميع سمات HTML هي عقد سمات.
  • تُسمى النصوص المُدرجة في عناصر HTML بعُقد النصوص.
  • التعليقات هي عقد تعليق.

تاريخ

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

أصدرت شركة نتسكيب كوميونيكيشنز لغة جافا سكريبت عام ١٩٩٥ ضمن متصفح نتسكيب نافيجاتور ٢.٠. وفي العام التالي ، أصدرت مايكروسوفت ، منافستها، متصفح إنترنت إكسبلورر ٣.٠ مع إعادة برمجة لجافا سكريبت تُسمى JScript. أتاحت جافا سكريبت وJScript لمطوري الويب إنشاء صفحات ويب تفاعلية من جانب المستخدم . عُرفت الإمكانيات المحدودة لاكتشاف أحداث المستخدم وتعديل مستند HTML في الجيل الأول من هذه اللغات باسم "DOM المستوى ٠" أو "DOM القديم". لم يُوضع معيار مستقل لـ DOM المستوى ٠، ولكن وُصفت جزئيًا في مواصفات HTML ٤ .

كانت بنية DOM القديمة محدودة في أنواع العناصر التي يمكن الوصول إليها. كان بالإمكان الإشارة إلى عناصر النموذج والرابط والصورة باستخدام اسم هرمي يبدأ بكائن المستند الجذر. يمكن أن يستخدم الاسم الهرمي إما أسماء العناصر التي تم اجتيازها أو فهرسها التسلسلي . على سبيل المثال، يمكن الوصول إلى عنصر إدخال النموذج إما باستخدام `<form>` document.myForm.myInputأو `<image> document.forms[0].elements[0]`.

أتاحت تقنية DOM القديمة التحقق من صحة النموذج من جانب العميل والتفاعل البسيط مع الواجهة مثل إنشاء تلميحات الأدوات .

في عام ١٩٩٧، أصدرت كل من نتسكيب ومايكروسوفت الإصدار ٤.٠ من متصفح نتسكيب نافيجاتور وإنترنت إكسبلورر على التوالي، مضيفتين دعمًا لوظيفة HTML الديناميكي (DHTML) التي تُمكّن من إجراء تغييرات على مستند HTML المُحمّل. تطلّب DHTML إضافاتٍ إلى كائن المستند الأساسي المُتاح في تطبيقات DOM القديمة. على الرغم من أن تطبيقات DOM القديمة كانت متوافقة إلى حد كبير نظرًا لأن JScript مبنية على JavaScript، فقد طُوّرت إضافات DHTML DOM بشكل متوازٍ من قِبل كل مُصنّع متصفح، وظلّت غير متوافقة. عُرفت هذه الإصدارات من DOM باسم "DOM الوسيط".

بعد توحيد معايير ECMAScript ، بدأ فريق عمل DOM التابع لاتحاد شبكة الويب العالمية (W3C) بصياغة مواصفات قياسية لنموذج كائن المستند (DOM). أصبحت المواصفات المكتملة، والمعروفة باسم "DOM المستوى 1"، توصية من اتحاد شبكة الويب العالمية في أواخر عام 1998. وبحلول عام 2005، كانت أجزاء كبيرة من نموذج كائن المستند (DOM) الخاص باتحاد شبكة الويب العالمية مدعومة بشكل جيد من قبل متصفحات الإنترنت الشائعة التي تدعم ECMAScript، بما في ذلك Internet Explorer 6 (من عام 2001)، وOpera ، و Safari ، والمتصفحات المبنية على Gecko (مثل Mozilla و Firefox و SeaMonkey و Camino ).

المعايير

WHATWG DOM

نشرت مجموعة عمل DOM التابعة لاتحاد شبكة الويب العالمية (W3C) توصيتها النهائية، ثم تم حلها في عام 2004. وانتقلت جهود التطوير إلى مجموعة عمل HATWG ، التي لا تزال تحافظ على معيار حيوي. [ 5 ] في عام 2009، أعادت مجموعة تطبيقات الويب تنظيم أنشطة DOM في اتحاد شبكة الويب العالمية. [ 6 ] في عام 2013، ونظرًا لبطء التقدم وقرب إصدار HTML5 ، أُعيد تكليف مجموعة عمل HTML بمواصفات DOM المستوى 4 لتسريع إنجازها. [ 7 ] في غضون ذلك، في عام 2015، تم حل مجموعة تطبيقات الويب، ونُقلت مسؤولية DOM إلى مجموعة منصة الويب. [ 8 ] بدءًا من نشر DOM المستوى 4 في عام 2015، يُصدر اتحاد شبكة الويب العالمية توصيات جديدة بناءً على نسخ من معيار WHATWG.

التطبيقات

متصفحات الويب

لعرض مستند مثل صفحة HTML، تستخدم معظم متصفحات الويب نموذجًا داخليًا مشابهًا لنموذج كائن المستند (DOM). تُنظَّم عُقد كل مستند في بنية شجرية تُسمى شجرة DOM ، وتُسمى العقدة العليا "كائن المستند". عند عرض صفحة HTML في المتصفحات، يقوم المتصفح بتنزيل HTML إلى الذاكرة المحلية وتحليله تلقائيًا لعرض الصفحة على الشاشة. مع ذلك، لا يُشترط بالضرورة تمثيل DOM كشجرة، [ 11 ] وقد استخدمت بعض المتصفحات نماذج داخلية أخرى. [ 12 ]

جافا سكريبت

عند تحميل صفحة ويب، يُنشئ المتصفح نموذج كائن المستند (DOC MOD) للصفحة، وهو تمثيل كائني التوجه لمستند HTML يعمل كواجهة بين جافا سكريبت والمستند نفسه. وهذا يسمح بإنشاء صفحات ويب ديناميكية ، [ 13 ] لأنه داخل الصفحة، يمكن لجافا سكريبت ما يلي:

  • إضافة أو تغيير أو إزالة أي من عناصر وسمات HTML
  • قم بتغيير أي من أنماط CSS
  • التفاعل مع جميع الأحداث القائمة
  • إنشاء أحداث جديدة

بنية شجرة DOM

شجرة نموذج كائن المستند (DOM) هي تمثيل هرمي لمستند HTML أو XML . تتكون من عقدة جذرية، وهي المستند نفسه، وسلسلة من العقد الفرعية التي تمثل العناصر والخصائص والمحتوى النصي للمستند. لكل عقدة في الشجرة عقدة أصلية، باستثناء العقدة الجذرية، ويمكن أن تحتوي على عدة عقد فرعية.

العناصر كعقد

تُمثَّل العناصر في مستند HTML أو XML كعُقد في شجرة DOM. لكل عُقدة عنصر اسم وسم وخصائص، ويمكن أن تحتوي على عُقد عناصر أخرى أو عُقد نصية كعناصر فرعية. على سبيل المثال، مستند HTML بالبنية التالية:

<html> <head> <title> موقعي الإلكتروني < / title > </head> <body> <h1> مرحباً بكم في DOM </h1> <p> هذا هو موقعي الإلكتروني . < / p > </body> </html>​​​​​​​​​​

سيتم تمثيلها في شجرة DOM على النحو التالي:

- المستند (الجذر) - html - رأس - عنوان - "موقعي الإلكتروني" - جسم - h1 - "مرحباً بكم في DOM" - ص - "هذا هو موقعي الإلكتروني."

عقد نصية

يُمثَّل المحتوى النصي داخل عنصر ما كعقدة نصية في شجرة DOM. لا تحتوي العقد النصية على سمات أو عقد فرعية، ولذلك فهي دائمًا عقد طرفية في الشجرة. على سبيل المثال، يُمثَّل كل من النص "موقعي الإلكتروني" في عنصر العنوان و"مرحبًا" في عنصر h1 كعقد نصية.

السمات كخصائص

تُمثَّل سمات العنصر كخصائص لعقدة العنصر في شجرة DOM. على سبيل المثال، عنصر ذو بنية HTML التالية:

<a href="https://example.com"> رابط </a>​​​​​​​

سيتم تمثيلها في شجرة DOM على النحو التالي:

- أ - href: "https://example.com" - "وصلة"

التلاعب بشجرة DOM

يمكن التلاعب بشجرة DOM باستخدام جافا سكريبت أو لغات برمجة أخرى. تشمل المهام الشائعة التنقل في الشجرة، وإضافة العقد وإزالتها وتعديلها، والحصول على خصائص العقد وتعيينها. توفر واجهة برمجة تطبيقات DOM مجموعة من الطرق والخصائص لتنفيذ هذه العمليات، مثل `<div>` و`<div>` و`<div>` getElementByIdو` createElement< appendChilddiv> innerHTML`.

// إنشاء العنصر الجذر var root = document.createElement ( "root" );// إنشاء عنصر فرعي var child = document.createElement ( "child " ) ;// أضف العنصر الفرعي إلى العنصر الجذر root.appendChild ( child ) ;

هناك طريقة أخرى لإنشاء بنية DOM وهي استخدام خاصية innerHTML لإدراج كود HTML كسلسلة نصية، مما يؤدي إلى إنشاء العناصر والعناصر الفرعية في هذه العملية. على سبيل المثال:

document.getElementById ( "root" ). innerHTML = " <child> </child>" ;

هناك طريقة أخرى تتمثل في استخدام مكتبة أو إطار عمل JavaScript مثل jQuery و AngularJS و React و Vue.js و Svelte وما إلى ذلك. توفر هذه المكتبات طريقة فعالة لإنشاء DOM ومعالجته والتفاعل معه.

من الممكن أيضًا إنشاء بنية DOM من بيانات XML أو JSON، باستخدام طرق JavaScript لتحليل البيانات وإنشاء العقد وفقًا لذلك.

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

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

التطبيقات

نظرًا لأن نموذج كائن المستند (DOM) يدعم التنقل في أي اتجاه (مثلًا، بين العنصر الأب والعنصر الشقيق السابق) ويسمح بإجراء تعديلات عشوائية، فإن التطبيقات عادةً ما تخزن المستند مؤقتًا. [ 14 ] مع ذلك، لا يشترط أن ينشأ نموذج كائن المستند من مستند مُسلسل، بل يمكن إنشاؤه مباشرةً باستخدام واجهة برمجة تطبيقات DOM. وحتى قبل ظهور فكرة نموذج كائن المستند، كانت هناك تطبيقات ذات بنية مكافئة مع تمثيل دائم على القرص وإمكانية وصول سريعة، على سبيل المثال نموذج DynaText الموضح في [ 15 ] والعديد من مناهج قواعد البيانات.

محركات التخطيط

تعتمد متصفحات الويب على محركات التخطيط لتحليل لغة HTML وتحويلها إلى نموذج كائن المستند (DOM). بعض محركات التخطيط، مثل Trident/MSHTML ، مرتبطة بشكل أساسي أو حصري بمتصفح معين، مثل Internet Explorer. بينما تشترك عدة متصفحات، مثل Google Chrome و Opera و Safari و Firefox ، في محركات تخطيط أخرى، بما في ذلك Blink و WebKit و Gecko . وتختلف هذه المحركات في مدى توافقها مع معايير DOM.

المكتبات

تطبيقات DOM:

  • libxml2
  • MSXML
  • Xerces عبارة عن مجموعة من تطبيقات DOM المكتوبة بلغات C++ و Java و Perl
  • xml.dom لـ Python
  • XML for < SCRIPT > هو تطبيق DOM قائم على JavaScript [ 16 ]
  • PHP.Gt DOM هو تطبيق DOM من جانب الخادم يعتمد على libxml2 ويوفر توافق DOM من المستوى 4 [ 17 ] للغة برمجة PHP
  • دومينو هو تطبيق DOM من جانب الخادم (Node.js) يعتمد على dom.js من موزيلا. يُستخدم دومينو في حزمة ميدياويكي مع المحرر المرئي.
  • SimpleHtmlDom هو نموذج كائن مستند HTML بسيط في لغة C#، والذي يمكنه إنشاء سلسلة HTML برمجيًا.

واجهات برمجة التطبيقات التي تعرض تطبيقات DOM:

أدوات الفحص:

انظر أيضاً

مراجع

  1. ↑ جميع إصدارات الترقيم تشير إلى نموذج كائن المستند الخاص بـ W3C فقط.
  2. 1 2 "نموذج كائن المستند (DOM): التعريف، والبنية، والمثال" . دليل IONOS الرقمي . تم الاطلاع عليه بتاريخ 21-04-2022 .
  3. ↑ "نموذج كائن المستند (DOM)" . W3C . تم الاسترجاع في 12-01-2012 . نموذج كائن المستند هو واجهة محايدة للمنصة واللغة تسمح للبرامج والنصوص البرمجية بالوصول ديناميكيًا إلى محتوى المستندات وبنيتها وأسلوبها وتحديثها.
  4. ↑ "JavaScript HTML DOM" .
  5. ↑ "معيار DOM" . تم الاطلاع عليه بتاريخ 23 سبتمبر 2016 .
  6. ↑ "نموذج كائن المستند W3C" . تم الاطلاع عليه بتاريخ 23 سبتمبر 2016 .
  7. ↑ (plh@w3.org)، فيليب لو هيغاريه. "ميثاق جديد لمجموعة عمل HTML من فيليب لو هيغاريه بتاريخ 30 سبتمبر 2013 (public-html-admin@w3.org من سبتمبر 2013)" . تم الاطلاع عليه بتاريخ 23 سبتمبر 2016 .{{cite web}}: صيانة CS1: أسماء رقمية: قائمة المؤلفين ( رابط )
  8. ↑ "حالة النشر - تطبيقات الويب" . مؤرشف من الأصل في 10 يونيو 2017. تم الاطلاع عليه في 23 سبتمبر 2016 .
  9. ↑ "تاريخ نشر W3C DOM4" . 3 نوفمبر 2020. تم الاطلاع عليه في 10 أغسطس 2024 .
  10. ↑ "تاريخ نشر DOM" . 28 سبتمبر 2021. تم الاطلاع عليه في 10 أغسطس 2024 .
  11. ↑ "ما هو نموذج كائن المستند؟" . W3C . تاريخ الاسترجاع: 12 سبتمبر 2021. مع ذلك، لا يُحدد نموذج كائن المستند (DOM) أن المستندات يجب أن تُنفذ على شكل شجرة أو بستان، كما أنه لا يُحدد كيفية تنفيذ العلاقات بين الكائنات. نموذج كائن المستند هو نموذج منطقي يُمكن تنفيذه بأي طريقة مُلائمة.
  12. ↑ "تحديث شجرة DOM في متصفح مايكروسوفت إيدج" . مايكروسوفت. 19 أبريل 2017. تم الاطلاع عليه بتاريخ 12 سبتمبر 2021 .
  13. ↑ "JavaScript HTML DOM" . تم الاطلاع عليه بتاريخ 23 سبتمبر 2016 .
  14. ↑ شركة كوجنت سوليوشنز (2008). كتاب أجاكس الأسود، طبعة جديدة (مع قرص مضغوط) . دار دريمتك للنشر. ص 40. رقم ISBN  978-8177228380.
  15. ↑ الولايات المتحدة الأمريكية، براءة اختراع منتهية الصلاحية رقم 5557722A ، ستيفن ديروز وجيفري فوغل، "نظام معالجة البيانات وطريقة لتمثيل المستندات الإلكترونية، وإنشاء تمثيل لها، وعرضها بشكل عشوائي"، نُشرت في 17 سبتمبر 1996 
  16. ↑ "محلل XML متعدد المنصات لـ <script> في جافا سكريبت" . تم الاطلاع عليه بتاريخ 23 سبتمبر 2016 .
  17. ↑ "واجهة برمجة تطبيقات DOM الحديثة لمشاريع PHP 7" . 5 ديسمبر 2021.

مراجع عامة

  • فلاناغان، ديفيد (2006). جافا سكريبت: الدليل الشامل . دار أورايلي وشركاؤه للنشر. الصفحات 312-313 . رقم ISBN  0-596-10199-6.
  • كوخ، بيتر-بول (14 مايو 2001). "نموذج كائن المستند: مقدمة" . مجلة الويب الرقمية . مؤرشف من الأصل في 27 أبريل 2017. تم الاطلاع عليه في 10 يناير 2009 .
  • لو هيغاريه، فيليب (2002). "نموذج كائن المستند (DOM) الخاص باتحاد شبكة الويب العالمية " . تم الاطلاع عليه بتاريخ 10 يناير 2009 .
  • غيسيه، فابيان. "ماذا يُضيف كل مستوى من مستويات DOM؟" . مركز مطوري موزيلا . مشروع موزيلا. مؤرشف من الأصل في 2 مارس 2013. تم الاطلاع عليه في 10 يناير 2009 .