البطل الخفي للمواقع: فهم DOM

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

على الرغم من أهمية DOM ، فإن الكثير من الناس لا يفهمونها. في الواقع ، يمكنك برمجة مواقع الويب لسنوات دون معرفة الكثير عنها. ولكن مع تقدم تقنية الواجهة الأمامية ، أصبح فهم DOM أكثر أهمية.

فهم عقد DOM

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

يتيح وجود واجهة لأي جزء من البرنامج التفاعل مع أي جزء آخر من البرنامج بطريقة يمكن التحكم فيها ويمكن التنبؤ بها. تتيح الواجهة أيضًا إمكانية عمل جزء واحد من البرنامج مع أي جزء آخر ، حتى لو لم يكن يعرف أي شيء عن جزء البرنامج الموجود على الجانب الآخر من الواجهة.

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

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

يتم الحفاظ على معيار DOM من قبل منظمة تسمى اتحاد شبكة الويب العالمية، أو W3C. لقد خلقوا وثائق مفصلة للغاية تحدد DOM اساسي.

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

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

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

كيف يتم هيكلة DOM

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

تُنشئ بنية الشجرة علاقات منطقية بين العقد ، مثل شجرة العائلة. يمكن أن يكون لكل عقدة أحد الوالدين والأجداد التي تتفرع منها. يمكن أن يكون لديهم أشقاء. ويمكن أن يكون للعقد أطفال وأحفاد. يساعد التفكير بهذه المصطلحات كثيرًا عند استخدام JavaScript و CSS للتفاعل مع DOM.

كيف تتفاعل HTML مع DOM

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

إذا كنت بدأت للتو باستخدام HTML ، فإليك خمس نصائح للتعرف عليها.

5 خطوات لفهم كود HTML الأساسي

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

HTML أبسط وأكثر تسامحًا من لغات البرمجة التقليدية. يجعل التفاعل مع DOM سهلاً لمصممي الويب المبتدئين.

كيف تتفاعل CSS مع DOM

بمجرد أن يقوم HTML الخاص بك ببناء مستند DOM ، يمكن لـ CSS تصميم هذا المستند. للقيام بذلك ، يجب أن يكون قادرًا على العثور على العناصر التي تريد تصميمها. يفعل هذا بعدة طرق.

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

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

كيف تتفاعل JavaScript مع DOM

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

متعلق ب: ما هو جافا سكريبت؟

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

يمكن لـ JavaScript البحث والتنقل في شجرة المستندات بطريقة مشابهة جدًا لـ CSS. إنه قادر على العثور على العناصر حسب المعرف والفئة. ويمكنه استرداد قوائم العناصر الفرعية كمصفوفات.

مستقبل تطوير الويب و DOM

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

يسمح AJAX لمواقع الويب بتحديث البيانات المعروضة من الخادم أثناء التنقل دون إعادة تحميل الصفحة. قبل AJAX ، كان يمكن رؤية كل تغيير في البيانات فقط عند إعادة تحميل الصفحة ، أو عندما ينتقل المستخدم إلى صفحة أخرى.

بعد AJAX ، أصبحت تطبيقات الويب أكثر شيوعًا. لم يعد الإنترنت عبارة عن مجموعة من مواقع الويب الثابتة البسيطة وبعض التطبيقات عالية الأداء ، مثل eBay. أصبح الإنترنت الآن نظام تشغيل ثانيًا تقريبًا ، مليء بالتطبيقات عالية الأداء.

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

يجلب WebAssembly العديد من مزايا التعليمات البرمجية الأصلية إلى المتصفح ، بما في ذلك السرعة المحسنة والوصول الأفضل إلى الأجهزة. سيسمح للمبرمجين باستخدام لغات أخرى لإنشاء مواقع ويب مثل C ++ و Rust.

ولكن حتى مع التحسينات الهائلة التي سيجلبها WebAssembly ، سيظل DOM موجودًا ، مما يوفر واجهة متسقة بين الكود وما يتم عرضه في المتصفح.

كيفية استخدام Outlook في الوضع المظلم

قم بتقليل إجهاد العين وزيادة عمر البطارية عن طريق تبديل Microsoft Outlook إلى الوضع الداكن.

عن المؤلف