يرمز 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
هو إشارة إلىواجهة برمجة تطبيقات تخزين الويبكائن localStoragesessionStorage
هو مرجع إلى كائن Web Storage API sessionStorage
أساليب
الwindow
يكشف الكائن أيضًا عن طرق مفيدة:
alert()
: التي يمكنك استخدامها لعرض مربعات حوار التنبيهpostMessage()
: مستخدم من قبل ملفواجهة برمجة تطبيقات Channel MessagingrequestAnimationFrame()
: تستخدم لأداء الرسوم المتحركة بطريقة تتميز بالأداء والسهولة على وحدة المعالجة المركزية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 يظهر علامة الرأس ، التي تحتوي على علامة العنوان بقيمتها:
في ما يلي تمثيل لجزء من DOM يُظهر علامة النص الأساسي ، التي تحتوي على رابط ، مع قيمة وسمة href بقيمتها:
يمكن الوصول إلى كائن المستند من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
عقدة العنصر
يمكنك أيضًا الحصول على قائمة بجميع عقد العناصر من نوع معين ، مثل ملفمجموعة 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
طريقة. ومع ذلك ، فإنه لا يشمل فقط عقد العناصر ، ولكن أيضًا المسافة البيضاء بين العناصر كعقد نصية. هذا ليس شيئًا تريده بشكل عام.
للحصول على أول عقدة عنصر فرعية ، استخدمNode.firstElementChild
. للحصول على آخر عقدة عنصر فرعية ، استخدمNode.lastElementChild
:
يعرض 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'
يغير محتوى العقدة النصية إلى "شيء ما".
تحميل مجانيدليل جافا سكريبت للمبتدئين
المزيد من دروس المتصفح:
- تتوفر بعض الحيل المفيدة في HTML5
- كيف أنشأت موقع ويب يستند إلى CMS يعمل دون اتصال بالإنترنت
- الدليل الكامل لتطبيقات الويب التقدمية
- واجهة برمجة تطبيقات الجلب
- دليل Push API
- واجهة برمجة تطبيقات Channel Messaging
- دروس عمال الخدمة
- دليل ذاكرة التخزين المؤقت API
- دليل API الإخطار
- الغوص في IndexedDB
- واجهة برمجة تطبيقات المحددات: querySelector و querySelectorAll
- تحميل JavaScript بكفاءة مع التأجيل وغير المتزامن
- نموذج كائن المستند (DOM)
- واجهة برمجة تطبيقات Web Storage: التخزين المحلي وتخزين الجلسة
- تعرف على كيفية عمل ملفات تعريف الارتباط HTTP
- واجهة برمجة تطبيقات التاريخ
- تنسيق صورة WebP
- طلب XMLHttpRequest (XHR)
- برنامج تعليمي متعمق SVG
- ما هي عناوين URL للبيانات
- خارطة الطريق لتعلم منصة الويب
- CORS ، تقاسم الموارد عبر الأصول
- عمال الويب
- دليل requestAnimationFrame ()
- ما هو النوع
- العمل مع DevTools Console وواجهة برمجة تطبيقات وحدة التحكم
- واجهة برمجة تطبيقات تركيب الكلام
- كيفية انتظار حدث جاهز لـ DOM في JavaScript عادي
- كيفية إضافة فئة إلى عنصر DOM
- كيفية تكرار عناصر DOM من querySelectorAll
- كيفية إزالة فئة من عنصر DOM
- كيفية التحقق من وجود فئة لعنصر DOM
- كيفية تغيير قيمة عقدة DOM
- كيفية إضافة حدث نقرة إلى قائمة عناصر DOM التي تم إرجاعها من querySelectorAll
- WebRTC ، واجهة برمجة تطبيقات الويب في الوقت الفعلي
- كيفية الحصول على موضع التمرير لعنصر في JavaScript
- كيفية استبدال عنصر DOM
- كيفية قبول الصور فقط في حقل ملف الإدخال
- لماذا تستخدم نسخة معاينة من المتصفح؟
- كائن النقطة
- كائن الملف
- كائن FileReader
- كائن FileList
- ArrayBuffer
- ArrayBufferView
- كائن URL
- صفائف من النوع
- كائن DataView
- واجهة برمجة تطبيقات BroadcastChannel
- واجهة برمجة تطبيقات Streams
- كائن FormData
- كائن المستكشف
- كيفية استخدام واجهة برمجة تطبيقات تحديد الموقع الجغرافي
- كيفية استخدام getUserMedia ()
- كيفية استخدام Drag and Drop API
- كيفية العمل مع التمرير على صفحات الويب
- التعامل مع النماذج في JavaScript
- أحداث لوحة المفاتيح
- أحداث الماوس
- أحداث اللمس
- كيفية إزالة جميع العناصر الأبناء من عنصر DOM
- كيفية إنشاء سمة HTML باستخدام Vanilla Javascript
- كيف تتحقق مما إذا كان مربع الاختيار محددًا باستخدام JavaScript؟
- كيفية النسخ إلى الحافظة باستخدام JavaScript
- كيفية تعطيل زر باستخدام JavaScript
- كيفية جعل صفحة قابلة للتحرير في المتصفح
- كيفية الحصول على قيم سلسلة الاستعلام في JavaScript باستخدام URLSearchParams
- كيفية إزالة جميع CSS من صفحة مرة واحدة
- كيفية استخدام insertAdjacentHTML
- سفاري ، حذر قبل الإقلاع عن التدخين
- كيفية إضافة صورة إلى DOM باستخدام JavaScript
- كيفية إعادة تعيين نموذج
- كيفية استخدام خطوط جوجل