DOMContentLoaded olayı nedir?

Bu olay, temel HTML belgesi tamamen yüklendiğinde ve ayrıştırıldığında, stil tabloları, resimler ve alt çerçevelerin yüklenmesini beklemeden gerçekleşir.

load olayından temel fark:

• DOMContentLoaded: DOM yapısı hazır olduğunda tetiklenir.
• load: Sayfadaki tüm kaynaklar (resimler, CSS, betikler, eğer async/defer değilse) tamamen yüklendikten sonra tetiklenir.

Kullanım:

// DOMContentLoaded olayını dinleyicisini ekliyoruz
document.addEventListener('DOMContentLoaded', () => {
  // DOM tamamen yüklendikten ve ayrıştırıldıktan sonra çalışacak kod
  console.log('DOM tamamen yüklendi ve ayrıştırıldı.');
});

Bu olay, DOM ile manipüle eden JavaScript kodunu çalıştırmak için sıklıkla kullanılır, çünkü tüm dış kaynakların yüklenmesini beklemeye gerek yoktur.