Chapitre 5 : Le DOM

Objectif

À la fin de ce chapitre, vous savez d’où viennent le paragraphe et le bouton que le clic utilise déjà. Le navigateur construit un document à partir de index.html. getElementById y retrouve un élément par son identifiant. Vous lisez le texte affiché, vous le remplacez, et vous voyez null quand l’identifiant n’existe pas. Le dossier premiere-page reste en place, ainsi que phraseEssai, prenoms, phrases et essai.

Le fichier n’est pas la page affichée

Ouvrez premiere-page. index.html est un fichier de texte. Le paragraphe porte id="message" et contient « En attente d’un clic. ». Le bouton porte id="action" et affiche « Nouvel essai ». La balise script est en bas de body et charge script.js.

Le navigateur ne se contente pas d’afficher les caractères du disque. Il lit les balises et construit un arbre en mémoire : le document, puis html, head, body, le titre, le paragraphe, le bouton et le script. Cet arbre s’appelle le DOM, pour Document Object Model, le modèle d’objet du document. C’est la page vivante. Le fichier, lui, ne bouge pas quand le script écrit une phrase.

Cliquez plusieurs fois, puis rechargez. Le paragraphe revient à « En attente d’un clic. ». essai.tentatives repart à zéro. Le DOM a été reconstruit depuis le fichier. Les phrases rangées dans phrases disparaissent avec lui : ce tableau vit dans le script, pas dans une balise.

document est l’objet qui représente cet arbre. Il est déjà là quand la page s’ouvre. Le script ne le crée pas. Il s’en sert pour retrouver des éléments.

Retrouver le paragraphe et le bouton

En haut de script.js, deux lignes font déjà cette recherche. Elles datent du premier chapitre. On les relit maintenant pour de bon.

const message = document.getElementById("message");
const bouton = document.getElementById("action");

getElementById parcourt le document et s’arrête sur l’élément dont l’attribut id vaut exactement le texte entre guillemets. "message" désigne le paragraphe. "action" désigne le bouton. Un identifiant ne doit nommer qu’un seul élément de la page.

La recherche a lieu une fois, quand le navigateur lit ces lignes, pas à chaque clic. Le résultat est gardé dans message et dans bouton. Plus bas, l’écouteur réutilise ces deux noms. Il ne cherche plus.

Comme la balise script est en bas de body, le paragraphe et le bouton existent déjà dans l’arbre au moment de la recherche. Un script placé dans head, sans attendre la fin du fichier, pourrait chercher trop tôt. getElementById ne trouverait alors rien. On laisse le script à la fin du corps.

Ajoutez trois lignes juste après les deux recherches. Enregistrez, rechargez, ouvrez la console.

console.log(message);
console.log(message.id);
console.log(bouton.textContent);

La console montre l’élément paragraphe, puis le texte message, puis « Nouvel essai ». message n’est pas la phrase affichée. C’est l’élément entier : la balise, son identifiant, son texte. Retirez ces trois lignes. Le reste du fichier ne change pas.

Lire le texte, puis le remplacer

Le texte visible se lit avec textContent. Au chargement, avant tout clic, message.textContent vaut « En attente d’un clic. ». Ce sont les caractères entre la balise ouvrante et la balise fermante.

On écrit dans la même propriété. Placez cette ligne juste après la création de essai, avant la fonction. Rechargez sans cliquer.

message.textContent = "Le document est prêt.";

Le paragraphe affiche « Le document est prêt. ». Rouvrez index.html : la phrase d’attente est toujours dans le fichier. Seul le DOM a changé. Un rechargement relit le fichier, exécute à nouveau la ligne, et la phrase préparée revient. Le disque n’a pas été réécrit.

Le clic fait déjà cette écriture, avec la phrase calculée. Au premier clic, essai.tentatives passe à 1. phraseEssai(essai.prenom, essai.tentatives, essai.limite) renvoie « Aina, essai 1 sur 3. ». phrases.push range ce texte dans le tableau. Puis une ligne met la page à jour :

message.textContent = phrase;

La phrase préparée disparaît. Le paragraphe montre l’essai. phrases grandit, mais aucun élément du document n’en liste le contenu. Pour montrer l’historique à l’écran, il faudrait l’écrire dans un élément. On ne le fait pas : le paragraphe ne garde que la phrase courante.

textContent traite la valeur comme du texte. Si la phrase contenait les caractères <strong>, ils s’afficheraient tels quels. Ils ne deviendraient pas une balise. On n’utilise pas innerHTML pour ce message : une phrase construite avec + ne doit pas être lue comme du HTML.

Retirez la ligne qui affiche « Le document est prêt. ». Au chargement, le paragraphe doit à nouveau montrer « En attente d’un clic. », jusqu’au premier clic.

Quand l’identifiant n’existe pas

Remplacez un instant "message" par "messages", avec un s de trop. Enregistrez et rechargez.

const message = document.getElementById("messages");
console.log(message);

Aucun élément n’a cet identifiant. getElementById renvoie null. null veut dire : pas d’objet. Ce n’est pas un paragraphe vide. C’est l’absence de résultat. console.log(message) affiche null, sans erreur rouge. La recherche a échoué, et le script le dit clairement.

Le clic, lui, va plus loin. Il exécute message.textContent = phrase. Lire ou écrire textContent sur null arrête le script. La console affiche une erreur de type. Selon le navigateur, le texte exact change : Chrome indique qu’il ne peut pas lire des propriétés de null, Firefox dit que message est null. Dans les deux cas, l’écriture n’a pas eu lieu. Le paragraphe reste sur « En attente d’un clic. ».

console.log(message.id) produit la même famille d’erreur, tout de suite au chargement : on demande une propriété à null. C’est pour cela que le journal utile, ici, est console.log(message), pas console.log(message.id).

Si c’est bouton qui vaut null, l’erreur arrive encore plus tôt. bouton.addEventListener ne peut pas poser un écouteur sur rien. Le script s’interrompt au chargement, et le clic ne fait rien.

Remettez "message", exactement comme dans index.html, et retirez le console.log. La casse compte : "Message" ne trouve pas id="message". Rechargez. La console est silencieuse, et le premier clic affiche à nouveau « Aina, essai 1 sur 3. ».

Deux éléments avec le même id rendent la page invalide. getElementById renvoie le premier qu’il rencontre dans l’arbre. On garde un seul paragraphe message et un seul bouton action.

Exercice

1. Rechargez sans clic. Le paragraphe affiche « En attente d’un clic. ». La console ne montre pas d’erreur rouge.
2. Ajoutez console.log(message.textContent); juste après la recherche, puis rechargez. La console affiche la phrase d’attente. Retirez cette ligne.
3. Cliquez une fois. Le paragraphe devient « Aina, essai 1 sur 3. ». Tapez phrases.length dans la console : la valeur est 1.
4. Écrivez "messages" à la place de "message", ajoutez console.log(message), rechargez, puis cliquez. La console montre null, ensuite l’erreur. Rétablissez l’identifiant du fichier et retirez le journal.

À retenir

• Le DOM est l’arbre que le navigateur construit à partir du fichier. Le script modifie cet arbre, pas index.html.
• document.getElementById retrouve un élément par son id. La recherche se fait une fois, au chargement.
• textContent lit le texte visible et le remplace. Le clic s’en sert pour afficher la phrase renvoyée par phraseEssai.
• Un identifiant absent donne null. Utiliser textContent sur null arrête le script.

La suite

Le clic est déjà branché. bouton.addEventListener("click", ...) lance une fonction plus tard, quand la personne clique. Le chapitre 6, « Événements », s’arrête sur ce branchement : ce qu’est un événement, pourquoi la fonction ne s’exécute pas tout de suite, et ce que le navigateur transmet au moment du clic. Gardez premiere-page, phraseEssai, prenoms, phrases et essai. Le paragraphe et le bouton restent ceux que getElementById a trouvés.