javascriptDOMContentLoaded and readyStateDOMContentLoaded و آماده‌شدن DOM در جاوااسکریپت
آماده‌شدن DOM در جاوااسکریپت را با DOMContentLoaded و readyState مدیریت کنید؛ چرا انتخاب عنصر پیش از ساخت سند ممکن است null بدهد؟
مفهوم به زبان ساده
وقتی مرورگر HTML را می‌خواند، عنصرها به‌تدریج ساخته می‌شوند. اگر یک اسکریپت زودتر از عنصر مورد نظر اجرا شود، انتخاب آن عنصر ممکن است null بدهد؛ این حالت همیشه به معنی غلط‌بودن انتخابگر نیست. زمان اجرای کد نسبت به آماده‌شدن ساختار سند هم اهمیت دارد. رویداد DOMContentLoaded خبر می‌دهد خواندن اولیهٔ HTML و اجرای اسکریپت‌های defer و ماژول‌های غیر async انجام شده است.
این رویداد منتظر بارگیری همهٔ تصویرها نمی‌ماند و با load یکسان نیست. در بسیاری از صفحه‌ها، استفادهٔ درست از اسکریپت defer راه ساده‌ای برای هماهنگی با ساخت سند است. اما کدی که بعداً به صفحه می‌رسد، ممکن است پس از وقوع DOMContentLoaded اجرا شود. ثبت شنوندهٔ تنها در آن زمان، رویدادی را که قبلاً گذشته دوباره ایجاد نمی‌کند.
الگوی نمونه readyState را بررسی می‌کند: اگر هنوز loading باشد، یک شنوندهٔ یک‌باره ثبت می‌شود؛ وگرنه تابع شروع همان لحظه اجرا می‌شود. خروجی یک پیام است، ولی زمان رسیدن به آن به مرحلهٔ بارگیری بستگی دارد. در برنامهٔ واقعی باید از نصب دوبارهٔ شنونده‌ها هنگام چند بار فراخوانی شروع نیز جلوگیری کنید. برای تمرین، این الگو را در یک فایل defer و سپس در کنسول صفحهٔ آماده مقایسه کنید.
کجا به کار می‌آید؟
- شروع انتخاب عنصرها پس از آماده‌شدن ساختار اولیهٔ سند
- پشتیبانی از کدی که قبل یا بعد از DOMContentLoaded بارگذاری می‌شود
از تعریف تا یک مثال واقعی
function startLesson() {
console.log('شروع تمرین');
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', startLesson, { once: true });
} else {
startLesson();
}
شروع تمرین
این مثال چطور کار می‌کند؟
readyState مرحلهٔ کنونی سند را مشخص می‌کند.
در حالت loading، تابع برای رویداد آینده ثبت می‌شود.
اگر سند از آن مرحله گذشته باشد، شروع مستقیم انجام می‌شود؛ پیام یک‌بار چاپ می‌شود.
اشتباه رایج
افزودن شنوندهٔ DOMContentLoaded پس از وقوع آن، به‌تنهایی تابع را اجرا نمی‌کند. آماده‌شدن DOM نیز به معنی کامل‌شدن همهٔ تصویرها یا درخواست‌های برنامه نیست.
این را به خاطر بسپارید
پیش از وابسته‌کردن کد به یک عنصر، زمان آماده‌شدن سند و زمان ورود خود اسکریپت را در نظر بگیرید.