ما هو نموذج كائن المستند (Document Object Model)، ولماذا يجب أن تعرف كيفية استخدامه

كُتب بواسطة Leonardo Maldonado

إذاً قمت بتعلم HTML، وصنعت الصفحة الأولى الخاصة بك، تعلمت CSS وصنعت نماذج جميلة، وأزرار مذهلة، قمت بعمل صفحات متوافقة مع الشاشات، وبدأت تُري الآخرين أعمالك الرائعة.

لكن قررت أن تتقدم في علمك، وبدأت تسأل نفسك: “كيف أضيف حركة لصفحة الويب الخاصة بي؟ أتمنى لو هذا الزر قام بحركة معينة عند الضغط عليه!”

حسناً، لذلك DOM (Document Object Model) أتت لتحل مشكلتك. لابد أنك سمعت عنها كثيراً من قبل، لكن ربما للآن لا تعرف ماهي؟ وأي المشكلات تحل، لذا هيا نتعمق فيها.

ما هو DOM؟

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

(DOM(Document Object Model والذي يعني نموذج كائن المستند، هو عبارة عن واجهة تعرض لك كيف تُقرأ مستندات HTML و XML في المتصفح. إنها تسمح للغة JavaScript أن تتلاعب وتبني وتصمم موقعك. بعد أن يقرأ المتصفح مستند HTML الخاص بك، فإنه ينشئ شجرة تمثيلية تسمى نموذج كائن المستند (DOM)  ويحدد كيف يمكن الوصول إلى تلك الشجرة.

الإيجابيات 

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

مثلما قلت، لديك إمكانيات لا نهائية – عليك فقط أن تستخدم إبداعك.

التمثيل بواسطة المتصفح

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

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

1. المستند (Document): يتعامل مع جميع مستندات الHTML.
2. العناصر (Elements): كل العلامات (tags) التي بداخل الHTML أو XML تتحول إلى عناصر DOM.
3. النص (text): كل ما تحتويه العلامات (tags) من محتوى.
4. السمات (Attributes): كل السمات التي تأتي من عناصر محددة في HTML. في الصورة السمة class= “hero” هي سمة من العنصر <p>.

تلاعب الـDOM

الآن وصلنا لأفضل جزء: البدء بالتلاعب بالDOM. بدايةً، نريد إنشاء بعض عناصر HTML لنرى بعض الدوال وكيف تعمل الأحداث (events).

بسيط جداً، أليس كذلك؟ الآن نريد أن نتعلم المزيد عن دوال الDOM: كيف يمكننا الحصول على العناصر، ونبدأ بالتلاعب بها.

الدوال (Methods)

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

 ()getElementById

هذه الدالة تُرجع العنصر الذي له نفس اسم الid الذي يتم تمريره في الدالة. كما نعرف أن المعرفات (Ids) يجب أن يكونوا فريدين، لذلك هي دالة مهمة جداً للوصول إلى العنصر الذي تريده.

myStrart: اسم المتغير هذا يبدوا شبيهاً لاسم المعرّف (id) الذي تم تمريره في الدالة.

Start: هو المعرّف الذي تم تمريره، وفي هذه الحالة ليس لدينا أي معرّف بالاسم هذا بالتحديد، لذا ستكون النتيجة المرجعة null.

()getElementsByClassName

هذه الدالة تُرجع مجموعة العناصر التي لديها اسم الفئة (class) المحدد الذي تم تمريره.

myContainer: اسم المتغير هذا يبدوا مشابهاً لاسم الفئة (class) الذي تم تمريره في الدالة.

.container : اسم الفئة (class) التي تم تمريها، في هذه الحالة لا يوجد لدينا اسم فئة بهذا الاسم بالتحديد، لذلك  سيرجع null.

()getElementsByTagName

هذه الدالة تعمل مثل الدوال السابقة: تُرجع مجموعة من عناصر HTML، لكن هذه المرة باختلاف واحد: أنها تُرجع العناصر التي لها اسم العلامة (tag) الذي تم تمريره.

Buttons: اسم المتغير مشابه لاسم العلامة التي تم تمريرها.

Button: اسم العلامة (tag) الذي نريد الوصول إليه.

()querySelector

تُرجع العنصر الأول الذي تم تمرير محدد CSS له، فقط تذكر أن المحدد (selector)  يجب أن يكون مشابهاً لتركيب CSS. في حالة عدم وجود أي محدد، فإنه يرجع القيمة null.

resetButton: اسم المتغير هنا يشبه اسم المحدد الذي تم تمريره.

#reset: اسم المحدد الذي تم تمريره، ولو لم يكن لديك أي محدد مشابه لهذا الاسم سيرجع null.

()querySelectorAll

شبيه جداً لدالة querySelector()، لكن يوجد اختلاف واحد أنها تُرجع جميع العناصر التي لديها اسم المحدد في CSS الذي تم تمريره. المحدد الذي يتم تمريره أيضاً يجب أن يتشابه مع تركيب CSS. في حالة عدم وجود أي محدد سيرجع null.

myButtons: اسم المتغير هنا يشبه اسم المحددات التي تم تمريرها.

#buttons: اسم المحدد الذي تم تمريره، ولو لم يكن لديك أي محدد مشابه لهذا الاسم سيرجع null.

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

مرة أخرى، يمكنك أن تجد باقي الدوال هنا ، في الجهة اليسار في الدوال (methods). أنا أوصيك بشدة أن تأخذ نظرة على بعض منهم، لأنك قد تحتاجهم في شيء ما قريباً.

الآن سنتعرف على الأحداث (events) – بدونها لا يمكننا إنشاء حركات لصفحاتنا.

الأحداث (Events)

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

النقر (click) 

واحدة من أهم الأهم الأحداث هي النقر. عندما يقوم المستخدم بالنقر على عنصر معين يحدث نشاط ما.

عوامل ()parameters) addEventListener)  هي:

1. نوع الحدث الذي تريده ( في هذه الحالة النقر ‘click’)
2. الدالة callback
3. الـuseCapture وضعه الافتراضي false. فهو يحدد ما إذا كنت تريد “التقاط” “Capture” الحدث أم لا.

تحديد (select)

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

هناك أحداث أخرى كثيرة الاستخدام. بالطبع هناك العديد من الأحداث التي يمكنك استخدامها، مثل أحداث السحب والاسقاط (drag and drop)- عندما يبدأ المستخدم بسحب عنصر يقوم بعمل حدث معين، وعندما يقوم باسقاط العنصر يقوم بعمل حدث آخر.

الآن سنرى كيف يمكننا اجتياز ال DOM ونستخدم بعض الخواص.

اجتياز الـDOM

يمكنك اجتياز الDOM باستخدام بعض الخواص التي سوف نراها الآن. باستخدام هذه الخواص يمكن إرجاع عناصر، تعليقات، ونص ..إلخ.

childNodes.

هذه الخاصية تُرجع NodeList من العقد الأبناء أو العقد التابعة لعنصر معين. تُرجع النص، التعليقات، وهكذا. لذا، عندما تريد استخدامه، يجب أن تكون حذراً.

firstChild.

هذه الخاصية تُرجع الابن الأول للعنصر المعطى.

nodeName.

هذه الخاصية تُرجع اسم العنصر المعطى. في هذه الحالة قمنا بتمرير div. لذلك سوف تُرجع “div”.

nodeValue.

هذه الخاصية خاصة بالنصوص والتعليقات، حيث أنها ترجع أو تحدد قيمة العقدة الحالية. في هذه الحالة،  بما أننا قمنا بتمرير div ، فإنها سترجع null.

nodeType.

هذه الخاصية تُرجع نوع العنصر المعطى. في هذه الحالة تُرجع “1”.

بالمناسبة، ماذا تعني القيمة “1”؟ هو بالأساس نوع العقدة للعنصر المعطى. في هذه الحالة تكون  _ELEMENT_NODE_  وترجع null. لو كانت هذه سمة، قد يُرجع “2” وقيمة السمة.

جدول يحتوي علي جميع أنواع NodeType و NodeName  و NodeValue التي تم إرجاعها.

يمكنك القراءة أكثر عن NodeTypes  هنا.

العناصر (Elements)

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

parentNode.

هذه الخاصية تُرجع الأب  أو الأصل للعقدة (node) المعطاة.

firstElementChild.

تُرجع أول عنصر ابن أو التابع الأول للعنصر المعطى.

lastElementChild.

تُرجع آخر عنصر ابن، أو التابع الأخير للعنصر المعطى.

هذه بعض العناصر التي لدى DOM. مهم جداً لك معرفة أساسيات الDOM، كيف تعمل، دوالها وخواصها، لأنك ستحتاجها يوماً ما.

الخاتمة

الـDOM تزودنا بأهم الAPI’s (واجهة برمجة التطبيقات) لإنشاء تطبيقات رائعة ومبتكرة. إذا فهمت الأساسيات يمكنك عمل أشياء لا تصدق. إذا كنت تريد قراءة المزيد حول DOM يمكنك النقر هنا، وقراءة كل مستندات MDN.