/DOM

DOM

المقال من دائرة تصميم صفحات الويب بالكات،
DOM {Document Object Model}

– تقنية تستخدم من قبل المتصفحات للتميز بين العناصر المختلفة وطريقة ارتباطها ببعضها البعض حيث تقوم بترتيب العناصر بطريقة شجرية لتستطيع التعرف ع الطريقة الملائمة لعرضها ع الشاشة

– ولذلك فإن كل العناصر فى ملف htmlيمكن الوصول اليها عن طريق CSS & Javascript ولكن ذلك ليس جيدا فى جميع الأحوال . ماذا لو كنت اريد جزء من ملف html معزول وجعله لايتاثر بباقي ال CSS & Javascript هنا يأتي دور ال

Shadow DOM
تقنية تسمح باضافة DOM فرعي فى الناتج النهائي وليس فى ال DOM الأصلي

– مبرمجي متصفحات الويب مثل جوجل كروم وفايرفوكس أدركوا أن كتابة الأكواد البرمجية الخاصة بالشكل وطريقة الأداء للعناصر الشائعة مثل video يمكننا وضع source داخله واضافة التحكمات اللازمة ولكن لايمككنا تغير الشكل بسهولة

مميزات Shadow DOM
1. معزول بمعني انه لايتأثر بال CSS & Javascript الخارجيين والعكس صحيح
2. تبسيط التداخل فى CSS Classes وبالتالي التحسين فى أداء الموقع
3. الإنتاجية فإنك ستفكر فى صفحة الويب كأنها أجزاء مترابطة وليس ككيان واحد

بعض المفاهيم
– العنصر المرتبط بال Shadow DOM يسمي Shadow Host
– هناك بعض العناصر التي لا يمكن ان ان تضيف لها Shadow DOM مثل input لأنه محجوز من قبل المتصفح
– مما سبق يمكننا اعتبار ان ال Shadow DOM
is a DOM within a DOM

الأوضاع المختلفة لل Shadow DOM
1. مفتوح
يمكن الوضول له والتحكم به باستخدام ال javascript
2. مغلق
معزول بشكل كامل ولا يمكن الوضول له باستخدام ال javascript

#CAT_Circles

a Live version from CAT offcial Magazine - CATazine - , CATazineLive is a weekly magazine which mainly have topics about Computer and Technology