🎨 Le cours : faire vivre la page
Quand le navigateur lit un fichier HTML (voir Structure), il construit en mémoire un arbre d'objets : le DOM (*Document Object Model*). Chaque balise devient un nœud que JavaScript peut retrouver, modifier, supprimer ou créer. Dès que le DOM change, le navigateur redessine la page : c'est ce qui rend une page interactive.
Où placer le script
Un script ne peut agir que sur les éléments qui existent déjà quand il s'exécute. Place-le donc à la fin du <body>, ou dans le <head> avec l'attribut defer (<script src="app.js" defer></script>) qui retarde l'exécution jusqu'à ce que la page soit lue. Écrire le script dans un fichier séparé garde le HTML lisible.
Sélectionner des éléments
| Méthode | Renvoie |
|---|
document.getElementById("x") | l'élément d'id="x", ou null |
document.querySelector("css") | le premier élément qui correspond à un sélecteur CSS (".carte", "nav a"), ou null |
document.querySelectorAll("css") | tous les éléments qui correspondent (une NodeList, qu'on parcourt avec forEach ou for…of) |
el.closest("css") | l'ancêtre le plus proche qui correspond (en remontant) |
el.parentElement el.children | le parent / la liste des enfants |
Un sélecteur CSS marche donc partout (voir Sélecteurs). Garde l'élément dans une const pour ne pas le rechercher à chaque fois.
Lire et modifier le contenu
textContent lit ou remplace le texte d'un élément ; c'est la méthode sûre. innerHTML interprète le texte comme du HTML, ce qui est pratique pour insérer une structure mais dangereux avec une donnée venue de l'utilisateur (une balise <script> ou <img onerror=…> saisie dans un champ s'exécuterait : faille XSS). Pour les champs de formulaire, on lit et on écrit .value (toujours du texte), .checked pour une case à cocher. Les attributs : el.getAttribute("href"), el.setAttribute("href", …), ou directement el.href. Les données personnalisées data-niveau="3" se lisent avec el.dataset.niveau.
Classes et styles
Pour changer l'apparence, ajoute ou retire une classe (classList.add, remove, toggle, contains) et laisse le CSS s'en charger : la mise en forme reste dans la feuille de style, et on peut l'animer (voir Animations). el.style.couleurDeFond (propriétés CSS en camelCase) n'est à utiliser que pour une valeur calculée (une position, une largeur en pourcentage).
Créer, insérer et supprimer des éléments
document.createElement("li") fabrique un élément hors de la page. Il n'apparaît qu'une fois inséré : parent.append(el) (à la fin), prepend (au début), el.before(autre), el.after(autre). el.remove() le retire. Construire avec createElement et textContent est la méthode sûre pour des données qui ne sont pas de confiance.
Les événements
Un événement signale que quelque chose s'est produit. element.addEventListener(type, fonction) enregistre une fonction (un *callback*, voir Fonctions) appelée à chaque fois. Elle reçoit un objet event qui décrit l'événement : event.target (l'élément touché), event.key (la touche), event.preventDefault() (annule le comportement par défaut : suivre un lien, envoyer un formulaire).
| Événement | Se produit quand… |
|---|
click | on clique (ou on active au clavier) sur l'élément |
input | le contenu d'un champ change (à chaque frappe) |
change | une valeur est validée (sortie du champ, case cochée, option choisie) |
submit | un formulaire est envoyé |
keydown keyup | une touche est enfoncée / relâchée |
mouseover mouseout | la souris entre / sort de l'élément |
DOMContentLoaded | le HTML est entièrement lu (sur document) |
scroll resize | la page défile / la fenêtre change de taille (sur window) |
Les formulaires
Le schéma est toujours le même : écouter submit, appeler event.preventDefault(), lire les .value (convertir avec Number si besoin), calculer, afficher le résultat avec textContent. Le formulaire complet est expliqué dans Formulaires.
Bulles et délégation d'événements
Un événement remonte (« bulle ») de l'élément touché jusqu'à ses ancêtres. On en profite pour n'écrire qu'un seul écouteur sur le parent au lieu d'un par enfant : event.target.closest("li") retrouve l'élément cliqué. Cela marche aussi pour les éléments ajoutés plus tard.
<ul id="menu">
<li data-page="accueil">Accueil</li>
<li data-page="cours">Cours</li>
</ul>
<script>
document.getElementById("menu").addEventListener("click", (event) => {
const item = event.target.closest("li");
if (item) console.log("page :", item.dataset.page);
});
</script>
Console, après un clic sur « Cours »page : cours
Garder des données : localStorage
localStorage conserve des textes dans le navigateur, même après fermeture de l'onglet (sessionStorage : jusqu'à sa fermeture). Seuls des textes s'y rangent : on passe par JSON pour un objet (voir Objets et JSON). Ces données restent sur l'appareil de l'utilisateur, ne sont pas chiffrées et ne doivent jamais contenir de mot de passe.
const prefs = { theme: "sombre", taille: 16 };
localStorage.setItem("prefs", JSON.stringify(prefs));
const lues = JSON.parse(localStorage.getItem("prefs"));
console.log(lues.theme);
Console (dans une vraie page)sombre
Déboguer
console.log(element) affiche l'élément ; console.dir(element) ses propriétés ; console.table(tableau) un tableau lisible.- L'onglet Éléments des outils de développement (
F12) montre le DOM en direct, et l'onglet Console les erreurs avec le numéro de ligne.
- Un
null inattendu (« Cannot read properties of null ») signifie presque toujours que le sélecteur ne trouve rien, ou que le script s'exécute avant que l'élément existe.
