Vanilla Javascript Domcontentloaded

Vanilla Javascript Domcontentloaded

3 min read Jun 18, 2024
Vanilla Javascript Domcontentloaded

Memahami DOMContentLoaded dalam JavaScript

Dalam pengembangan web, penting untuk memastikan bahwa kode JavaScript Anda dijalankan setelah dokumen HTML selesai dimuat dan diurai. Hal ini memastikan bahwa JavaScript dapat mengakses dan memanipulasi elemen DOM dengan benar. Salah satu cara untuk memastikan ini adalah dengan menggunakan event DOMContentLoaded.

Apa itu DOMContentLoaded?

DOMContentLoaded adalah event yang terjadi ketika HTML dokumen selesai diurai dan DOM (Document Object Model) siap untuk diakses. Ini berbeda dengan event load yang terjadi setelah semua sumber daya seperti gambar dan stylesheet selesai dimuat.

Mengapa DOMContentLoaded Penting?

  • Memastikan Kode Dijalankan Secara Benar: Dengan menggunakan DOMContentLoaded, Anda dapat memastikan bahwa kode JavaScript Anda dijalankan setelah DOM siap, mencegah error karena elemen belum ada atau belum sepenuhnya diurai.
  • Meningkatkan Performa: Mengaktifkan event DOMContentLoaded akan mempercepat loading halaman karena kode JavaScript akan dijalankan setelah parsing HTML, tanpa menunggu sumber daya tambahan selesai dimuat.

Cara Menggunakan DOMContentLoaded

Berikut cara menggunakan DOMContentLoaded dalam JavaScript:

  1. Melalui addEventListener:
document.addEventListener('DOMContentLoaded', function() {
  // Kode JavaScript yang akan dijalankan setelah DOM selesai diurai
  console.log('DOM sudah siap!');
});
  1. Melalui DOMContentLoaded Method:
document.addEventListener('DOMContentLoaded', () => {
  // Kode JavaScript yang akan dijalankan setelah DOM selesai diurai
  console.log('DOM sudah siap!');
});

Contoh Penggunaan

document.addEventListener('DOMContentLoaded', function() {
  const element = document.getElementById('myElement');
  element.innerHTML = 'Teks telah diubah!';
});

Kode di atas akan mengubah isi dari elemen dengan ID myElement menjadi "Teks telah diubah!" setelah DOM selesai diurai.

Kesimpulan

DOMContentLoaded adalah event penting dalam JavaScript yang memungkinkan Anda menjalankan kode setelah dokumen HTML selesai diurai. Ini membantu memastikan bahwa kode JavaScript Anda dijalankan secara benar dan meningkatkan performa halaman web Anda. Selalu gunakan DOMContentLoaded untuk memanipulasi DOM dan membuat halaman web Anda lebih responsive.

Related Post