4: Révisions DOM

Voici les grandes lignes suivies par la plupart de nos programmes JS vus au S2:

1) Ils s’exécutent au chargement de la page pour:
a) chercher des éléments DOM (par exemple: document.querySelector)
b) enregistrer des fonctions ("gestionnaires d'événements") sur ces éléments DOM (par exemple: titre.addEventListener(...)).
Ces fonctions ne sont pas appelées tout de suite.
c) Notre programme a fini et rend la main au navigateur qui continue le chargement de la page.

2) Plus tard, l'utilisateur déclenche un événement (par exemple en cliquant) sur un élément (par exemple le <h1>)
La fonction enregistrée est appelée.
Elle modifie l'affichage en manipulant le DOM (par exemple paragraphe.style.color='green')

Exemple  complet:

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Exemple</title>
	</head>
	<body>
        <h1>Cliquez-moi!</h1>
		<p>Bonjour!</p>
		<script>
			let titre=document.querySelector('h1');
			titre.addEventListener('click',fonction_a_appeler);
			function fonction_a_appeler()
			{
			  let paragraphe=document.querySelector('p');
			  paragraphe.style.color='green';
			}
		</script>
	</body>
</html>
(plus de détails)