Ja, im Grunde ist das , was Sie getan haben, richtig, außer dass Sie vergessen, dass JavaScript in vielen Fällen synchronisiert ist. Wenn Sie also den Code ausführen, bevor Ihr DOM geladen wird, gibt es nur wenige Möglichkeiten, dies zu lösen:
1) Überprüfen Sie, ob DOM vollständig geladen ist, und machen Sie dann, was Sie wollen. Sie können DOMContentLoaded zum Beispiel anhören :
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
2) Sehr häufig wird das Skript-Tag am unteren Rand Ihres document
(nach dem Body-Tag) hinzugefügt :
<html>
<head>
</head>
<body>
</body>
<script src="/bundle.js"></script>
</html>
3) Using window.onload
, das ausgelöst wird, wenn die gesamte Seite geladen wird (img usw.)
window.addEventListener("load", function() {
console.log("Everything is loaded");
});
4) Verwenden document.onload
, das ausgelöst wird, wenn das DOM bereit ist:
document.addEventListener("load", function() {
console.log("DOM is ready");
});
Es gibt noch mehr Optionen, um zu überprüfen, ob DOM bereit ist, aber die kurze Antwort lautet: Führen Sie KEIN Skript aus, bevor Sie sichergestellt haben, dass Ihr DOM in jedem Fall bereit ist ...
JavaScript arbeitet mit DOM- Elementen zusammen. Wenn diese nicht verfügbar sind, wird null zurückgegeben , die gesamte Anwendung kann beschädigt werden. Stellen Sie daher immer sicher, dass Sie bereit sind, Ihr JavaScript auszuführen, bevor Sie dies tun.