حدث DOMContentLoaded ينطلق عندما ينتهي المتصفح من تحميل HTML وتحليله. في هذه اللحظة تكون كل عناصر الصفحة موجودة، ويمكن لـ JavaScript الوصول إليها.

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('h1').textContent = 'Ready!';
});

لماذا أحتاجه؟

إذا شغّلت كودًا يبحث عن عنصر قبل أن يُنشأ، ستحصل على null. هذا الحدث يضمن أن العناصر جاهزة.

الفرق بينه وبين load

• DOMContentLoaded: بعد HTML فقط، دون انتظار الصور والخطوط.
• load: بعد تحميل كل شيء، بما فيه الصور، فهو أبطأ.

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