Défi JavaScript de Manlikeakin, jour 93 : DOM : DOMContentLoaded.

Wow .. nous terminons ce défi à cette heure la semaine prochaine !

Le  DOMContentLoaded  se déclenche lorsque le contenu DOM est chargé, sans attendre que les images et les feuilles de style aient fini de se charger.

Vous devez gérer le  DOMContentLoadedevent lorsque vous placez le JavaScript dans l'en-tête de la page mais que vous référencez des éléments dans le corps, par exemple :

Dans cet exemple, nous référençons le bouton dans le  corps  du JavaScript dans le  head .

Parce que le DOM n'a pas été chargé lorsque le moteur JavaScript analyse le JavaScript dans la tête, le bouton avec l'id btn n'existe pas.

Pour résoudre ce problème, placez le code dans un  gestionnaire d'événements DOMContentLoaded  , comme ceci :

Lorsque vous placez JavaScript dans l'en-tête, cela entraînera des goulots d'étranglement et des retards de rendu, il est donc préférable de déplacer le script avant la  balise </body> . Dans ce cas, vous n'avez pas besoin de placer le code dans l'  événement DOMContentLoaded  , comme ceci :

Résumé

L'  événement DOMContentLoaded  se déclenche lorsque le contenu DOM est chargé, sans attendre la fin du chargement des images et des feuilles de style.

Ne gérez  l'événement DOMContentLoaded  que si vous placez le code JavaScript dans la tête, qui fait référence aux éléments de la section body.

Merci d'avoir lu!