DOM Ready… kebanyakan orang menyalahartikannya dengan DOM Loaded, padahal DOM Ready itu tidak sama dengan DOM Loaded. DOM Loaded atau onload yakni sebuah jenis event dalam JavaScript yang akan terpicu dikala seluruh halaman dan muatan yang ditransfer telah berhasil dimuat. Atau bahasa mudahnya yakni dikala indikator memuat pada peramban telah menghilang (atau berhenti berputar-putar, tergantung desain antarmuka peramban):
Sedangkan DOM Ready atau DOMContentLoaded yakni event yang akan terpicu dikala peramban telah berhasil membaca keseluruhan elemen DOM, yaitu dari bab awal halaman web hingga ke final halaman. Dari elemen <html> hingga elemen penutupnya yaitu </html>, tapi tidak tergantung pada apakah semua muatan telah berhasil terpanggil atau tidak. Selama peramban telah berhasil membaca elemen HTML dari awal halaman hingga final halaman, itu saja sudah cukup untuk memicu event ini:
// Event `DOMContentLoaded` pada peramban-peramban moderen window.addEventListener("DOMContentLoaded", function() {}, false); // Event `onload` (hanya bekerja jikalau seluruh muatan halaman telah berhasil termuat) window.onload = function() {};Sebuah penerapan DOMContentLoaded sanggup digambarkan sebagai berikut:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <script> window.addEventListener("DOMContentLoaded", function() { document.querySelector('#test-elem').style.border = "5px solid red"; }, false); </script> </head> <body> <div id="test-elem">Test</div> </body> </html>Berdasarkan referensi di atas, sebuah elemen #test-elem seharusnya akan dikenai border berwarna merah setebal 5 piksel, namun tidak jikalau keadaannya menyerupai ini. Justru, keadaan ini malah akan menampilkan konsol error alasannya yakni JavaScript tidak berhasil menemukan elemen yang dimaksud:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <script> document.querySelector('#test-elem').style.border = "5px solid red"; // TypeError: document.querySelector("#test-elem") is null </script> </head> <body> <div id="test-elem">Test</div> </body> </html>Berbeda dengan CSS, JavaScript hanya akan berhasil menyeleksi elemen jikalau elemen tersebut telah ada. Memicu fungsi untuk menawarkan border pada elemen sebelum elemen tersebut berhasil terbaca tidak akan menghasilkan apapun. Untuk mengatasi persoalan di atas, maka Anda cukup memastikan saja bahwa elemen yang ingin diseleksi telah terbaca oleh peramban sebelum JavaScript terpicu:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> </head> <body> <div id="test-elem">Test</div> <script> document.querySelector('#test-elem').style.border = "5px solid red"; </script> </body> </html>Akan tetapi dalam keadaan tertentu, Anda mungkin tidak sanggup mengkondisikan JavaScript dengan posisi menyerupai di atas (mungkin persoalan CMS yang tidak mengizinkan, alasan efisiensi dengan cara menyatukan semua file JavaScript ke dalam satu file berukuran besar, atau alasannya yakni hal yang lain). Jika memang alasannya yakni suatu alasan Anda hanya sanggup meletakkan JavaScript di area <head>, maka event DOMContentLoaded sanggup menjadi solusi. Namun, mengingat event ini hanya diadakan pada peramban-peramban moderen, Anda perlu menciptakan fungsi penanganan untuk menciptakan event pengganti menyerupai event ini jikalau peramban yang dipakai tidak dilengkapi dengan event DOMContentLoaded. Beberapa sudah ada yang membuatnya, contohnya ini atau ini.
Pengguna JavaScript Library
Para pengguna perpustakaan JavaScript tampaknya tidak perlu begitu memikirkan mengenai ini alasannya yakni sebagian besar library sudah dilengkapi dengan API untuk menangani event DOMContentLoaded:
- jQuery -
.ready() - MooTools - Window Event:
domready - YUI - DOM Lifecycle Events
- Prototype - The
dom:loadedEvent - Glow -
isDomReady - Midori - Event -
addEventListener
Jika Memang Tidak Harus
Jika Anda merasa tidak harus memakai event ini, maka cara yang paling praktis, aman, sesuai mekanisme dan sanggup bekerja pada semua peramban yakni cukup dengan meletakkan JavaScript sedekat mungkin dengan bab final halaman, yaitu dikala tidak ada elemen HTML lagi di bawahnya kecuali tag epilog </body>. Hasilnya tidak jauh berbeda dengan DOMContentLoaded alasannya yakni intinya keduanya akan memicu fungsi pada waktu yang hampir sama (hanya berbeda tipis):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> </head> <body> <div>Test</div> <div>Test</div> <div>Test</div> <div>Test</div> <div>Test</div> ... <script> alert('DOM is (almost) ready!'); </script> </body> </html>Atau buat fungsi utama pada area <head> lalu jalankan di bab final halaman:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <script> function myGlobalFunction() { alert('DOM is (almost) ready!'); } </script> </head> <body> <div>Test</div> <div>Test</div> <div>Test</div> <div>Test</div> <div>Test</div> ... <script>myGlobalFunction();</script> </body> </html>