[ درس ] دورة الجافا سكربت - ما هو dom؟

السلام عليكم ورحمة الله

اليوم نشرح شىء جديد بالجافا سكربت
في هذا الدرس سنتعرف على ما هو الـ DOM؟




الدرس مأخوذ من هنا

لنبدا

في هذا الفصل سندرس شيئا يسمى Document Object Model و يختصر بالـDOM و بالعربية يترجم ل"نموزج كائنات الوثيقة" ,و الوثيقة يقصد بها هنا محتوى صفحة الويب .و بفهم هذا الموضوع سيمكننا التحكم في محتويات صفحة الويب من خلال لغة الجافا سكريبت .

سميت هذا الفصل بالتحكم في html ,وربما كان العنوان الأنسب أن نسميه بالـ DOM إختصارا لـ Document Object Model ,لكني أحببت أن أضع له عنوانا يفهمه من لم يعرف بعد ما هو الـ DOM .فما هو الـ DOM ؟.



ترى في الشكل أن هناك كائن يسمى بالـ Document ,هذا الكائن و ما يحتويه من كائنات و بيانات يسمى بالـDOM.و لكن ما الكائنات و البيانات التي يحتويها؟
للإجابة على هذا السؤال إفتح أي صفحة ويب بمتصفح الفاير فوكس و إضغط f12 لتظهر لك أدوات مطوري المواقع ثم أختار html كما بالصورة:

ستظهر لك قائمة بها محتويات الصفحة منسقة على شكل قوائم و ستجد علامات "+" عند بعض العناصر التي عندما تضغط عليها ستظهر لك قائمة أخرى من العناصر بحيث أنك ستجد كل تاج html (*) و كل نص و كل مكون من مكونات الصفحة ممثلا .
كل هذه المكونات و المعلومات تتيح لك الجافا سكريبت الوصول لها و التعامل معها من خلال الكائن Document .
(*):التاج tag يترجم بالعربية ل"وسم" و كأمثلة له أو
, و احب إستخدام كلمة تاج لأن كلمة وسم غريبة ,فبدلا منها اكتب الكلمة الإنجليزية بالعربية .

و الآن عرفنا أن DOM هو الكائن Document بمحتوياته و عرفنا أن هذا الكائن يحتوى بداخله على محتويات صفحة الhtml .و لنقترب أكثر و نعرف كيف تمثل محتويات الصفحة في الكائن Document ,أنظر الشكل التالي:

على اليسار كود الhtml للصفحة و على اليمين شكل يوضح كيف تمثل في الجافا سكريبت.

يمثل التاج في الجافا سكريبت بكائن و ما يوجد داخله من تاجات و نصوص و( صفات Artibutes ) يمثل بخواص للكائن,و نعلم أنه يمكن أن يكون كائن خاصية في كائن آخر .و هناك مصطلح جديد يستخدم لوصف محتويات الـDom و هو الـ Node (النقطة ).
و ببساطة إذا نظرت للشكل بالأعلى فإن كل مستطيل من المستطيلات يسمى Node .تسمى النود الأعلى بالنقطة الأب parentNode و المتفرعات منها تسمى بالأبناء childNodes مثلا في الشكل تسمى body بالنقطة الأب ل p و تسمى p بالتالي بالنقطة الإبن لbody كذلك تسمى النقاط "this is the" و "paragrph"و em بالنقاط childNodes الأبناء لـ P.
الـDOM واسطة بين الهيتمل و الجافا سكريبت فهي تمكنك من معرفة قيم بيانات الهيتميل و أيضا التحكم فيها بالجافا سكريبت :
بالنسبة للهتميل الـ Nodes تكون إما عناصر html مثل
أو أو نصوص مثل "this is the" أو أنواع أخرى سنذكرها في الدروس التالية .
أما أنوع البيانات في الـ Nodes عندما تتعامل معها داخل الجافا سكريبت يمكن أن تكون كائنات أو مصفوفات أو أوتار أو أرقام .

ما سبق هو مقدمة نظرية للDOM و إن لم تستوعبها جيداً لا تقلق في الدروس التالية بالأمثلة العملية ستتضح لك الأمور .و قبل أن ننتقل للتطبيق سأوضح لك الطريق الذي سنسير عليه في الفصل بالدروس التالية.
نعلم أن الهدف الأساسي من الجافا الإسكريبت جعل الويب متفاعل مع المستخدم .و فائدة الـ DOM هو أنه يمثل لنا مكونات صفحة الهيتميل بكائنات جافا سكريبت و بالتالي إذا كنت تريد أن تغير نص معين في صفحة الهيتميل مثل "this is the" فإنك لكي تفعل ذلك تحتاج أولا أن تصل له و تحدده و ثم بعد ذلك تجري ما تريد عليه من تعديلات من خلال الجافا سكريبت و ما تحدثه من تعديل في الجافا سكريبت على النص سيظهر أثره على صفحة الهيتميل و ما سندرسه في الدروس التالية هو:

• كيفية الوصول للـNode التي نريدها.
• كيفية معرفة خواص ومعلومات الـNode .
• تغير محتويات هيتميل بالجافا سكريبت.
• الصفات و تعديل إستايل العرض بالجافا سكريبت.

أكثر...