ما هو نموذج كائن المستند ، ولماذا يجب أن تعرف كيفية استخدامه.

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

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

حسنًا ، هذا هو المكان الذي يأتي فيه DOM لحل مشكلتك. من المحتمل أنك سمعت الكثير عنها ، لكنك قد لا تعرف حتى الآن ما هي وما هي المشاكل التي تحلها. لذلك دعونا نحفر.

إذن ، ما هو DOM؟

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

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

مزايا

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

كما قلت ، لديك إمكانيات غير محدودة - ما عليك سوى استخدام إبداعك.

تمثيل من قبل المتصفح

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

  1. المستند : يتعامل مع جميع مستندات HTML .
  2. العناصر : تتحول جميع العلامات الموجودة داخل HTML أو XML إلى عنصر DOM.
  3. النص : جميع محتويات العلامات.
  4. السمات : جميع السمات من عنصر HTML معين . في الصورة ، السمة class = ”hero” هي سمة من العنصر < p>.

التلاعب في DOM

نحن الآن نصل إلى الجزء الأفضل: البدء في معالجة DOM. أولاً ، سننشئ عنصر HTML كمثال لمعرفة بعض الطرق وكيفية عمل الأحداث.

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

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

طرق

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

getElementById ()

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

var myStart = document.getElementsById('start');

myStart : اسم المتغير الخاص بنا الذي يشبه المعرف الذي تم تمريره.

البداية : تم تمرير المعرف . وفي حال لم يكن لدينا أي معرف بهذا الاسم المحدد ، فسيتم إرجاعه فارغًا .

getElementsByClassName ()

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

var myContainer = document.getElementsByClassName('container');

myContainer : اسم المتغير الخاص بنا الذي يبدو مشابهًا للفصل الذي تم تمريره.

.container : لدينا من الدرجة مرت. في حالة عدم وجود أي فئة بهذا الاسم المحدد ، فإنها ترجع فارغة .

getElementsByTagName ()

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

var buttons = document.getElementsByTagName('button');

الأزرار : تم تمرير اسم المتغير الذي يشبه اسم العلامة لدينا .

button : اسم العلامة الذي نريد الحصول عليه.

محدد الاستعلام ()

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

var resetButton = document.querySelector('#reset');

resetButton : لدينا اسم المتغير الذي تبدو مماثلة لدينا محدد مرت.

#reset : محدد مرت، وإذا لم يكن لديك أي محدد أن المباريات فإنه يعود لاغية .

استعلام محدد الكل ()

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

var myButtons = document.querySelector('#buttons');

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

#buttons : محدد مرت، وإذا لم يكن لديك أي محدد يطابق ذلك يعود لاغية .

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

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

الآن ، سنتعرف على الأحداث - بعد كل شيء بدونها لا يمكننا عمل رسوم متحركة في صفحاتنا.

الأحداث

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

انقر

يعد حدث النقر أحد أكثر الأحداث استخدامًا. عندما ينقر المستخدم على عنصر معين ، فسوف يحقق بعض الإجراءات.

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

معلمات addEventListener () هي:

  1. نوع الحدث الذي تريده (في هذه الحالة " انقر ").
  2. وظيفة رد الاتصال
  3. و useCapture افتراضيا غير صحيح. يشير إلى ما إذا كنت تريد "التقاط" الحدث أم لا.

تحديد

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

myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);

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

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

عبور DOM

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

.childNodes

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

var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;

.firstChild

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

var container = document.querySelector('.container');
var getFirstChild = container.firstChild;

.اسم العقدة

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

var container = document.querySelector('.container');
var getName = container.nodeName;

.nodeValue

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

var container = document.querySelector('.container')
var getValue = container.nodeValue;

.nodeType

ترجع هذه الخاصية نوع العنصر المحدد. في هذه الحالة ، تقوم بإرجاع " 1 ".

var container = document.querySelector('.container')
var getValue = container.nodeType;

ولكن ، ماذا يعني " 1 " على أي حال؟ هو في الأساس نوع العقدة للعنصر المحدد. في هذه الحالة ، يكون _ELEMENT_NODE_ ويعيد قيمة فارغة. إذا كانت هذه سمة ، فسيتم إرجاعها إلينا كـ " 2 " وقيمة السمة.

يمكنك قراءة المزيد عن أنواع العقدة هنا.

عناصر

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

.عقدة الأم

تقوم هذه الخاصية بإرجاع أصل العقدة المحددة.

var container = document.querySelector('.container')
var getParent = container.parentNode;

.firstElementChild

إرجاع العنصر الفرعي الأول للعنصر المحدد.

var container = document.querySelector('.container')
var getValue = container.firstElementChild;

.lastElementChild

إرجاع العنصر الفرعي الأخير للعنصر المحدد.

var container = document.querySelector('.container')
var getValue = container.lastElementChild;

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

استنتاج

يوفر لنا DOM العديد من واجهات برمجة التطبيقات المهمة لإنشاء تطبيقات رائعة ومبتكرة. إذا فهمت أساسيات ذلك ، يمكنك إنشاء أشياء لا تصدق. إذا كنت ترغب في قراءة المزيد عن DOM ، يمكنك النقر هنا وقراءة جميع مستندات MDN.

؟ F ollow لي على تويتر!

F تابعني على جيثب!

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