نموذج كائن المستند (DOM)

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

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

تعرض المتصفحات واجهة برمجة تطبيقات يمكنك استخدامها للتفاعل مع DOM. هذه هي الطريقة التي تعمل بها أطر عمل JavaScript الحديثة - فهي تستخدم DOM API لإخبار المتصفح بما يجب عرضه على الصفحة.

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

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

تم توحيد DOM بواسطة WHATWG في ملفمواصفات DOM المعيشة القياسية.

باستخدام JavaScript ، يمكنك التفاعل مع DOM من أجل:

تفقد بنية الصفحة
الوصول إلى البيانات الوصفية للصفحة والعناوين
تحرير نمط CSS
إرفاق أو إزالة مستمعي الحدث
تحرير أي عقدة في الصفحة
تغيير أي سمة عقدة

.. وأكثر بكثير.

الكائنان الأساسيان اللذان توفرهما واجهة برمجة تطبيقات DOM والتي ستتفاعل معها كثيرًا هماdocumentوwindow.

كائن النافذة

الwindowيمثل الكائن النافذة التي تحتوي على مستند DOM.

window.documentيشير إلىdocumentكائن تم تحميله في النافذة.

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

ملكيات

فيما يلي قائمة بالخصائص المفيدة التي من المحتمل أن تشير إليها كثيرًا:

consoleيشير إلى وحدة تحكم تصحيح أخطاء المتصفح. مفيد لطباعة رسائل الخطأ أو التسجيل ، باستخدامconsole.logوconsole.errorوأدوات أخرى (انظرمتصفح DevToolsمقالة - سلعة)
documentكما قيل بالفعل ، يشير إلىdocumentكائن ، مفتاح لتفاعلات DOM التي ستجريها
historyيتيح الوصول إلىواجهة برمجة تطبيقات التاريخ
locationيتيح الوصول إلىواجهة الموقع، والتي يمكنك من خلالها تحديد عنوان URL والبروتوكول والتجزئة وغيرها من المعلومات المفيدة.
localStorageهو إشارة إلىواجهة برمجة تطبيقات تخزين الويبكائن localStorage
sessionStorageهو مرجع إلى كائن Web Storage API sessionStorage

أساليب

الwindowيكشف الكائن أيضًا عن طرق مفيدة:

alert(): التي يمكنك استخدامها لعرض مربعات حوار التنبيه
postMessage(): مستخدم من قبل ملفواجهة برمجة تطبيقات Channel Messaging
requestAnimationFrame(): تستخدم لأداء الرسوم المتحركة بطريقة تتميز بالأداء والسهولة على وحدة المعالجة المركزية
setInterval(): استدعاء دالة كل n مللي ثانية ، حتى يتم مسح الفاصل الزمني باستخدامclearInterval()
clearInterval(): يمسح الفاصل الزمني الذي تم إنشاؤه باستخدامsetInterval()
setTimeout(): تنفيذ وظيفة بعد 'n' مللي ثانية
setImmediate(): قم بتنفيذ وظيفة بمجرد أن يصبح المتصفح جاهزًا
addEventListener(): إضافة مستمع الحدث إلى المستند
removeEventListener(): إزالة مستمع الحدث من المستند

شاهد المرجع الكامل لجميع خصائص وطرقwindowكائن فيhttps://developer.mozilla.org/en-US/docs/Web/API/Window

كائن المستند

الdocumentيمثل الكائن شجرة DOM التي تم تحميلها في النافذة.

فيما يلي تمثيل لجزء من DOM يشير إلى علامتي الرأس والجسم:

DOM, the body and head tags

في ما يلي تمثيل لجزء من DOM يظهر علامة الرأس ، التي تحتوي على علامة العنوان بقيمتها:

DOM, the head tag with the title

في ما يلي تمثيل لجزء من DOM يُظهر علامة النص الأساسي ، التي تحتوي على رابط ، مع قيمة وسمة href بقيمتها:

DOM, the body tag with a link

يمكن الوصول إلى كائن المستند منwindow.documentو منذ ذلك الحينwindowهو الكائن العام ، يمكنك استخدام الاختصارdocumentمباشرة من وحدة تحكم المتصفح ، أو في كود JavaScript الخاص بك.

يحتوي كائن المستند هذا على عدد كبير من الخصائص والأساليب. المحددات APIالطرق هي أكثر الطرق التي ستستخدمها على الأرجح:

document.getElementById()
document.querySelector()
document.querySelectorAll()
document.getElementsByTagName()
document.getElementsByClassName()

يمكنك الحصول على عنوان المستند باستخدامdocument.title، وعنوان URL باستخدامdocument.URL. المُحيل متاح فيdocument.referrer، المجال فيdocument.domain.

منdocumentيمكنك الحصول على الجسم والرأسعقد العنصر:

document.documentElement: عقدة المستند
document.body: الbodyعقدة العنصر
document.head: الheadعقدة العنصر

The DOM nodes

يمكنك أيضًا الحصول على قائمة بجميع عقد العناصر من نوع معين ، مثل ملفمجموعة HTMLلجميع الروابط التي تستخدمdocument.links، كل الصور باستخدامdocument.images، كل الأشكال باستخدامdocument.forms.

المستندبسكويتيمكن الوصول إليها فيdocument.cookie. تاريخ آخر تعديل فيdocument.lastModified.

يمكنك أن تفعل أكثر من ذلك بكثير ، حتى تحصل عليهامدرسة قديمةواملأ البرامج النصية الخاصة بك بـdocument.write()، وهي طريقة تم استخدامها كثيرًا في الأيام الأولى لجافا سكريبت للتفاعل مع الصفحات.

شاهد المرجع الكامل لجميع خصائص وطرقdocumentكائن فيhttps://developer.mozilla.org/en-US/docs/Web/API/Document

أنواع العقد

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

وثيقة: الوثيقة عقدة ، بداية الشجرة
جزء: علامة HTML
أتر: سمة من سمات العلامة
نص: محتوى النص لعنصر أو عقدة Attr
تعليق: تعليق HTML
نوع الوثيقة: الدوكتايبتصريح

عبور DOM

DOM عبارة عن شجرة من العناصر ، مع وجود عقدة Document في الجذر ، والتي تشير إلىhtmlعقدة العنصر ، والتي بدورها تشير إلى عقد العنصر التابعة لهاheadوbody، وهكذا.

من كل عنصر من هذه العناصر ، يمكنك التنقل في بنية DOM والانتقال إلى عقد مختلفة.

الحصول على الوالد

كل عنصر لهواحد فقطالأبوين.

للحصول عليه ، يمكنك استخدامNode.parentNodeأوNode.parentElement(حيث تعني العقدة عقدة في DOM).

هم تقريبا نفس الشيء ، إلا عندما ركضوا علىhtmlجزء:parentNodeإرجاع أصل العقدة المحددة في شجرة DOM ، بينماparentElementيعرض العنصر الأصلي لعقدة DOM ، أو يكون فارغًا إذا لم يكن للعقدة أصل ، أو أن أصلها ليس عنصر DOM.

عادة ما يستخدمه الناسparentNode.

الحصول على الأطفال

للتحقق مما إذا كانت العقدة تحتوي على عقد فرعية ، استخدمNode.hasChildNodes()التي تُرجع قيمة منطقية.

للوصول إلى جميع عقد العناصر التابعة للعقدة ، استخدمNode.childNodes.

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

Get the children of a node

للحصول على أول عقدة عنصر فرعية ، استخدمNode.firstElementChild. للحصول على آخر عقدة عنصر فرعية ، استخدمNode.lastElementChild:

To get the first or last child Element Node

يعرض DOM أيضًاNode.firstChildوNode.lastChild، مع اختلاف أنهم لا يقومون "بتصفية" الشجرة لعقد Element فقط. سيعرضون أيضًا عقدًا نصية فارغة تشير إلى مسافة بيضاء.

باختصار ، للتنقل ، استخدم عناصر العناصر للأطفال

Node.childNodes
Node.firstElementChild
Node.lastElementChild

الحصول على الأشقاء

بالإضافة إلى الحصول على الوالد والأطفال ، نظرًا لأن DOM عبارة عن شجرة ، يمكنك أيضًا الحصول على أشقاء أي عقدة عنصر.

يمكنك القيام بذلك باستخدام

Node.previousElementSibling
Node.nextElementSibling

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

تحرير DOM

يقدم DOM طرقًا مختلفة لتحرير عقد الصفحة وتغيير شجرة المستند.

مع

document.createElement(): ينشئ عقدة عنصر جديدة
document.createTextNode(): ينشئ عقدة نصية جديدة

يمكنك إنشاء عناصر جديدة وإضافتها إلى عناصر DOM التي تريدها كأطفال ، باستخدامdocument.appendChild():

const div = document.createElement('div')
div.appendChild(document.createTextNode('Hello world!'))

first.removeChild(second)يزيل العقدة الفرعية "الثانية" من العقدة "الأولى".
document.insertBefore(newNode, existingNode)يُدرج "العقدة الجديدة" كأخوة لـ "العقدة الحالية" ، ويضعها قبل ذلك في بنية شجرة DOM.
element.appendChild(newChild)يغير الشجرة تحت "element" ، مضيفًا عقدة فرعية جديدة "newChild" إليها ، بعد كل العناصر الفرعية الأخرى.
element.prepend(newChild)يغير الشجرة تحت "عنصر" ، مضيفًا عقدة فرعية جديدة "newChild" إليها ، قبل العناصر الفرعية الأخرى. يمكنك تمرير عقد فرعي واحد أو أكثر ، أو حتى سلسلة سيتم تفسيرها على أنها عقدة نصية.
element.replaceChild(newChild, existingChild)يغير الشجرة تحت "element" ، ويستبدل "currentChild" بعقدة جديدة "newChild".
element.insertAdjacentElement(position, newElement)يقوم بإدراج "newElement" في DOM ، ويتم وضعه نسبيًا على "element" اعتمادًا على قيمة معلمة "position".انظر إلى القيم الممكنة.
element.textContent = 'something'يغير محتوى العقدة النصية إلى "شيء ما".

تحميل مجانيدليل جافا سكريبت للمبتدئين