HTML DOM: كيفية استخدام نموذج كائن المستند



ستزودك هذه المقالة بمعرفة مفصلة وشاملة عن HTML DOM ونموذج كائن المستند مع أمثلة.

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

مفهوم HTML DOM

الطريقة التي يتم بها الوصول إلى المحتوى الموثق وتعديله تسمى طراز كائن المستند أو DOM. يتم تنظيم الكائنات في تسلسل هرمي. يتم تطبيق هذا الهيكل الهرمي على تنظيم الكائنات في مستند ويب.





  • كائن النافذة & ناقص أعلى التسلسل الهرمي. إنه العنصر الأقصى في التسلسل الهرمي للكائن.
  • كائن المستند & ناقص كل مستند HTML يتم تحميله في نافذة يصبح كائن مستند. يحتوي المستند على محتويات الصفحة.
  • كائن النموذج & ناقص كل شيء محاط بعلامات… يحدد كائن النموذج.
  • عناصر التحكم في النموذج & ناقص يحتوي كائن النموذج على جميع العناصر المحددة لهذا الكائن مثل الحقول النصية والأزرار وأزرار الاختيار ومربعات الاختيار.

ما هو HTML DOM

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

 
شادي جروف إيولايان
فوق النهر ، تشارلي دوريان

ما هو HTML DOM ليس

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



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

لا يعتبر نموذج كائن المستند مواصفة ثنائية. ستكون برامج نموذج كائن المستند المكتوبة باللغة نفسها متوافقة مع التعليمات البرمجية المصدر عبر الأنظمة الأساسية ، لكن نموذج كائن المستند لا يحدد أي شكل من أشكال التشغيل البيني الثنائي.

لا يعد نموذج كائن المستند طريقة لاستمرار الكائنات في XML أو HTML. بدلاً من تحديد كيفية تمثيل الكائنات في XML ، يحدد نموذج كائن المستند كيفية تمثيل مستندات XML و HTML ككائنات ، بحيث يمكن استخدامها في البرامج الموجهة للكائنات.



HTML DOM ليس كذلك

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

لا يحدد نموذج كائن المستند 'الدلالات الداخلية الحقيقية' لـ XML أو HTML. يتم تحديد دلالات تلك اللغات من خلال اللغات نفسها.

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

نموذج كائن المستند ، على الرغم من اسمه ، ليس منافسًا لـ Component Object Model (COM). COM ، مثل CORBA ، هي طريقة مستقلة عن اللغة لتحديد الواجهات والكائنات ، نموذج كائن المستند عبارة عن مجموعة من الواجهات والكائنات المصممة لإدارة مستندات HTML و XML. قد يكون DOMتم تنفيذه باستخدام أنظمة مستقلة عن اللغة مثل COM أو CORBA ، ويمكن أيضًا تنفيذه باستخدام الارتباطات الخاصة باللغة مثل ارتباطات Java أو ECMAScript المحددة في هذا المستند.

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

نشأ نموذج كائن المستند كمواصفات للسماح بنقل برامج JavaScript النصية وبرامج Java بين متصفحات الويب. كان HTML الديناميكي هو الأصل المباشر لنموذج كائن المستند ، وكان يُنظر إليه في الأصل إلى حد كبير من حيث المتصفحات.

فرز مصفوفة c ++

ومع ذلك ، عندما تم تشكيل مجموعة عمل نموذج كائن المستند ، انضم إليها أيضًا بائعون في مجالات أخرى ، بما في ذلك محررات HTML أو XML ومستودعات المستندات. عمل العديد من هؤلاء البائعين مع SGML قبل تطوير XML نتيجة لذلك ، وقد تأثر نموذج كائن المستند بـ SGML Groves ومعيار HyTime. قام بعض هؤلاء البائعين أيضًا بتطوير نماذج الكائنات الخاصة بهم للوثائق من أجل تقديمهابرمجة APIs لمحرري SGML / XML أو مستودعات المستندات ، وقد أثرت نماذج الكائنات هذه أيضًا على نموذج كائن المستند.

خصائص HTML DOM

دعونا نرى خصائص كائنات المستند التي يمكن الوصول إليها وتعديلها بواسطة كائن المستند.

DOM-Graph
  1. كائن النافذة: يكون كائن النافذة دائمًا في أعلى التسلسل الهرمي.
  2. كائن المستند: عندما يتم تحميل مستند HTML في نافذة ، فإنه يصبح كائن مستند.
  3. كائن النموذج: يمثلها شكل العلامات.
  4. كائنات الارتباط: يمثلها حلقة الوصل العلامات.
  5. كائنات المرساة: يمثلها ل زار العلامات.
  6. عناصر التحكم في النموذج: يمكن أن يحتوي النموذج على العديد من عناصر التحكم مثل حقول النص والأزرار وأزرار الاختيار ومربعات الاختيار ، إلخ.

طرق من كائن المستند :

  1. اكتب ('سلسلة'): يكتب السلسلة المحددة في المستند.
  2. getElementById (): إرجاع العنصر الذي له قيمة المعرف المعطى.
  3. getElementsByName (): تُرجع جميع العناصر التي لها قيمة الاسم المعطى.
  4. getElementsByTagName (): تُرجع جميع العناصر التي لها اسم العلامة المحدد.
  5. getElementsByClassName (): يسترجع جميع العناصر التي لها اسم الفئة المحدد.

البحث عن عناصر HTML

عندما تريد الوصول إلى عناصر HTML باستخدام JavaScript ، يجب عليك العثور على العناصر أولاً.

هناك عدة طرق للقيام بذلك:

  • البحث عن عناصر HTML عن طريق المعرف
  • البحث عن عناصر HTML عن طريق اسم العلامة
  • البحث عن عناصر HTML حسب اسم الفئة

البحث عن عنصر HTML بالمعرف

أسهل طريقة للعثور على عنصر HTML في DOM ، هي باستخدام معرف العنصر.

مثال

البحث عن عناصر HTML عن طريق اسم العلامة

يجد هذا المثال العنصر بالمعرف = ”main“ ، ثم يبحث عن الكل

عناصر داخل 'main':

بهذا نصل إلى نهاية مقالة HTML DOM هذه. أتمنى أن تكون قد فهمت الجوانب المختلفة لـ HTML DOM ، نموذج كائن المستند.

تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في مدونة 'صور HTML' وسنعاود الاتصال بك.