Ya, pada dasarnya apa yang Anda lakukan benar, kecuali Anda lupa bahwa JavaScript disinkronkan dalam banyak kasus, jadi Anda menjalankan kode sebelum DOM Anda dimuat, ada beberapa cara untuk menyelesaikan ini:
1) Periksa untuk melihat apakah DOM dimuat penuh, kemudian lakukan apa pun yang Anda inginkan, Anda dapat mendengarkan DOMContentLoaded misalnya:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
2) Cara paling umum adalah menambahkan tag skrip ke bagian bawah document
(setelah tag body) Anda:
<html>
<head>
</head>
<body>
</body>
<script src="/bundle.js"></script>
</html>
3) Menggunakan window.onload
, yang dipecat ketika seluruh halaman dimuat (img, dll)
window.addEventListener("load", function() {
console.log("Everything is loaded");
});
4) Menggunakan document.onload
, yang dipecat ketika DOM siap:
document.addEventListener("load", function() {
console.log("DOM is ready");
});
Bahkan ada lebih banyak opsi untuk memeriksa apakah DOM sudah siap, tetapi jawaban singkatnya adalah JANGAN menjalankan skrip apa pun sebelum Anda memastikan DOM Anda siap dalam setiap kasus ...
JavaScript bekerja bersama dengan elemen DOM dan jika tidak tersedia, akan kembali nol , dapat merusak seluruh aplikasi ... jadi selalu pastikan Anda sepenuhnya siap untuk menjalankan JavaScript sebelum melakukannya ...