Agar Skrip Tidak Null Gunakan Cara Menjalankan Javascript setelah Dom Loaded

Ditulis oleh JavaScript

Bungkus akses elemen dalam document.addEventListener('DOMContentLoaded', ...) agar skrip berjalan setelah browser selesai mem-parse HTML. Langkah yang paling sering terlewat adalah menaruh querySelector atau getElementById di luar listener ini saat script dipasang di dalam <head>, sehingga hasilnya null karena elemennya belum ada.

Kenapa Script Berjalan Sebelum DOM Siap

Browser mengeksekusi HTML dari atas ke bawah. Script di <head> jalan duluan, sebelum <body> diproses.

  • querySelector dan getElementById mengembalikan null kalau targetnya belum diparse.
  • Baris berikutnya seperti btn.addEventListener langsung error karena memanggil properti milik null.
  • DOMContentLoaded menunggu struktur HTML selesai, load menunggu semua gambar dan stylesheet, defer menunda file eksternal, script di akhir body berjalan setelah elemen di atasnya tersedia.

Metode Menjalankan Javascript Setelah DOM Loaded

Untuk kode inline dan kasus umum di browser modern, DOMContentLoaded paling fleksibel. Untuk file eksternal, atribut defer lebih rapi karena tidak menghambat render.

Metode Cocok Untuk Catatan
DOMContentLoaded Script inline dan eksternal Jalan setelah HTML diparse, tanpa menunggu gambar
defer File eksternal Eksekusi berurutan setelah parse, perlu atribut di tag script
Script akhir body Halaman sederhana Praktis, urutan eksekusi mengikuti posisi tag

BACA JUGA:

Langkah Menerapkan DOMContentLoaded dengan Benar

Kebutuhan tutorial ini:

  • Satu file HTML
  • Akses elemen memakai querySelector
  • Tanpa library tambahan

1. Letakkan script di <head> atau hubungkan file JS eksternal.
2. Bungkus semua akses DOM dalam addEventListener('DOMContentLoaded').
3. Cek null sebelum memanipulasi elemen.

// SALAH: elemen belum ada saat baris ini jalan
const btn = document.querySelector('#kirim');
btn.addEventListener('click', () => {
  console.log('klik');
});

// BENAR
document.addEventListener('DOMContentLoaded', () => {
  const btn = document.querySelector('#kirim');
  if (!btn) return;
  btn.addEventListener('click', () => {
    console.log('klik');
  });
});

Baris addEventListener('DOMContentLoaded') menunda eksekusi sampai parser selesai. Pengecekan if (!btn) return menghentikan kode kalau ID salah ketik atau elemen memang tidak dirender.

FAQ

Apakah defer sama dengan DOMContentLoaded?

Tidak sama, script dengan defer otomatis berjalan sebelum event DOMContentLoaded dipicu.

Kapan memakai window load bukan DOMContentLoaded?

Pakai load hanya kalau kode butuh ukuran gambar final atau semua resource selesai dimuat.

Kenapa kode masih null padahal sudah pakai DOMContentLoaded?

Selector kemungkinan salah tulis atau elemen dibuat dinamis setelah event tersebut lewat.

Artikel Terkait