فهم جاهزية DOM بدون أطر عمل

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

الوصول المباشر إلى حالة DOM

بدلاً من الاعتماد على أطر العمل، يمكنك مباشرة تحقق من خاصية حالة جاهزية المستند:

if (document.readyState === 'Complete') { // DOM جاهز

if (document.readyState === 'complete') {
  // DOM is ready
}

التحقق من جاهزية DOM على أساس الحدث

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

وظيفة fireOnReady() { // ... } إذا (document.readyState === 'مكتمل') { fireOnReady(); } آخر { document.addEventListener("DOMContentLoaded", fireOnReady);

function fireOnReady() {
  // ...
}
if (document.readyState === 'complete') {
  fireOnReady();
} else {
  document.addEventListener("DOMContentLoaded", fireOnReady);
}

الاستفادة من خاصية isReady غير الموثقة في jQuery

على الرغم من أنها غير موثقة، إلا أن jQuery يكشف عن خاصية isReady التي تشير داخليًا إلى حالة استعداد DOM:

if ($.جاهز) { // DOM جاهز } آخر { // DOM ليس جاهزًا بعد

if ($.isReady) {
  // DOM is ready
} else {
  // DOM is not yet ready
}

مستوحى من مقتطف Dustin Diaz، يمكنك إنشاء مستمع DOM صغير جاهز كما يلي:

if (!/in/.test(document.readyState)) { // الوثيقة جاهزة } آخر { // الوثيقة ليست جاهزة

يستفيد هذا الفحص من حقيقة أن قيمة ReadyState تحتوي على "in" في حالات التحميل السابقة، مما يجعلها مؤشرًا موثوقًا لجاهزية DOM.