Interagir avec le HTML : getElementById

Interagir avec le HTML : getElementById#

Du JavaScript au HTML#

Jusqu'ici, vous avez utilisé JavaScript comme un langage de programmation classique : variables, conditions, fonctions, affichage dans la console. Mais l'intérêt réel de JavaScript est de pouvoir modifier une page HTML pendant qu'elle est affichée dans le navigateur : changer un texte, une couleur, cacher un élément, etc.

Pour cela, JavaScript a besoin de retrouver les balises HTML sur lesquelles il veut agir. La méthode la plus courante pour y parvenir s'appelle document.getElementById().

Donner un identifiant à une balise#

Pour que JavaScript puisse retrouver une balise HTML, on lui donne un identifiant unique via l'attribut id. Chaque id doit être unique dans toute la page.

<h1 id="titre">Bienvenue</h1>
<p id="message">Ceci est un paragraphe.</p>

Récupérer la balise en JavaScript#

On utilise ensuite document.getElementById("...") en lui passant l'id de la balise recherchée. La fonction renvoie une référence à cette balise, que l'on peut stocker dans une variable.

let titre = document.getElementById("titre");

La variable titre représente maintenant la balise <h1> dans le programme. On peut ensuite lire ou modifier ses propriétés.

Important

La balise <script> doit être placée après le HTML qu'elle manipule, soit juste avant la fermeture </body>. Sinon, au moment où getElementById s'exécute, la balise n'existe pas encore et la fonction renvoie null.

Modifier le texte : textContent#

Pour changer le texte affiché à l'intérieur d'une balise, on modifie sa propriété textContent.

 1<!DOCTYPE html>
 2<html><body>
 3  <h1 id="titre">Ancien titre</h1>
 4  <p id="message">Ancien message</p>
 5
 6  <script>
 7    let titre = document.getElementById("titre");
 8    titre.textContent = "Nouveau titre";
 9
10    let message = document.getElementById("message");
11    message.textContent = "Bonjour tout le monde !";
12  </script>
13</body></html>

Même si le HTML contient au départ "Ancien titre", c'est bien "Nouveau titre" qui s'affiche : le JavaScript s'exécute après le chargement du HTML et remplace son contenu.

Modifier le style : style#

Chaque balise possède une propriété style qui permet de lui appliquer du CSS directement depuis JavaScript. On utilise ensuite le nom de la propriété CSS que l'on souhaite modifier.

 1<!DOCTYPE html>
 2<html><body>
 3  <h1 id="titre">Un titre coloré</h1>
 4
 5  <script>
 6    let titre = document.getElementById("titre");
 7    titre.style.color = "red";
 8    titre.style.backgroundColor = "yellow";
 9    titre.style.fontSize = "48px";
10    titre.style.textAlign = "center";
11  </script>
12</body></html>

Important

Les noms des propriétés CSS contenant un tiret en CSS s'écrivent en camelCase en JavaScript :

CSS

JavaScript

color

style.color

background-color

style.backgroundColor

font-size

style.fontSize

text-align

style.textAlign

border-radius

style.borderRadius

Les valeurs restent toujours des chaînes de caractères : "red", "48px", "10%", etc.

Lire la valeur d'une balise#

textContent et style peuvent aussi être lus, pas seulement modifiés. On peut donc récupérer le texte actuel d'une balise pour le transformer.

 1<!DOCTYPE html>
 2<html><body>
 3  <p id="phrase">bonjour</p>
 4
 5  <script>
 6    let phrase = document.getElementById("phrase");
 7    let ancienTexte = phrase.textContent;
 8    phrase.textContent = ancienTexte.toUpperCase() + " !";
 9  </script>
10</body></html>

Exercices#

Exercice 9#

Complétez le script ci-dessous pour que, au chargement de la page, le titre affiche "JavaScript c'est génial" à la place de "À remplacer".

1<!DOCTYPE html>
2<html><body>
3  <h1 id="titre">À remplacer</h1>
4
5  <script>
6    let titre = ;
7    titre.textContent = ;
8  </script>
9</body></html>

Solution

let titre = document.getElementById("titre");
titre.textContent = "JavaScript c'est génial";

Exercice 10#

Complétez le script pour que le paragraphe soit affiché en bleu, avec un fond jaune et une taille de police de 32 pixels.

 1<!DOCTYPE html>
 2<html><body>
 3  <p id="message">Regarde comme je suis stylé !</p>
 4
 5  <script>
 6    let message = document.getElementById("message");
 7    // Complétez ici
 8
 9  </script>
10</body></html>

Solution

let message = document.getElementById("message");
message.style.color = "blue";
message.style.backgroundColor = "yellow";
message.style.fontSize = "32px";

Exercice 11#

Le programme ci-dessous contient 3 erreurs qui l'empêchent de fonctionner. Corrigez-les pour que le titre devienne "Corrigé !" et s'affiche en vert.

 1<!DOCTYPE html>
 2<html><body>
 3  <h1 id="titre">À corriger</h1>
 4
 5  <script>
 6    let titre = document.GetElementById(titre);
 7    titre.textContent = Corrigé !;
 8    titre.style.color = green;
 9  </script>
10</body></html>

Solution

let titre = document.getElementById("titre");
titre.textContent = "Corrigé !";
titre.style.color = "green";

Les trois erreurs :

  1. GetElementById → getElementById (JavaScript est sensible à la casse).

  2. L'id passé en argument doit être une chaîne de caractères : "titre" et non titre.

  3. Les valeurs "Corrigé !" et "green" doivent être entre guillemets.

Exercice 12#

Écrivez un programme qui :

  1. Récupère le paragraphe d'id "citation".

  2. Remplace son texte par "Je code, donc je suis.".

  3. Le met en italique (fontStyle = "italic"), en blanc (color = "white"), sur un fond noir (backgroundColor = "black").

  4. Ajoute un espacement intérieur de 20 pixels (padding = "20px").

1<!DOCTYPE html>
2<html><body>
3  <p id="citation">...</p>
4
5  <script>
6    // Complétez ici
7
8  </script>
9</body></html>

Solution

let citation = document.getElementById("citation");
citation.textContent = "Je code, donc je suis.";
citation.style.fontStyle = "italic";
citation.style.color = "white";
citation.style.backgroundColor = "black";
citation.style.padding = "20px";

Exercice 13#

Le HTML ci-dessous contient trois paragraphes avec des id différents. Écrivez le script pour que :

  • le paragraphe "feu1" devienne rouge ;

  • le paragraphe "feu2" devienne orange ;

  • le paragraphe "feu3" devienne green.

 1<!DOCTYPE html>
 2<html><body>
 3  <p id="feu1">STOP</p>
 4  <p id="feu2">ATTENTION</p>
 5  <p id="feu3">GO</p>
 6
 7  <script>
 8    // Complétez ici
 9
10  </script>
11</body></html>

Solution

let feu1 = document.getElementById("feu1");
feu1.style.color = "red";

let feu2 = document.getElementById("feu2");
feu2.style.color = "orange";

let feu3 = document.getElementById("feu3");
feu3.style.color = "green";

Exercice 14#

Complétez le programme pour qu'il :

  1. Récupère le texte actuel du paragraphe d'id "nom".

  2. Remplace son contenu par "Bonjour " suivi du texte récupéré, le tout en majuscules.

Par exemple, si le paragraphe contient "Alice", il doit afficher "Bonjour ALICE".

 1<!DOCTYPE html>
 2<html><body>
 3  <p id="nom">Alice</p>
 4
 5  <script>
 6    let paragraphe = document.getElementById("nom");
 7    let ancien = ;
 8    paragraphe.textContent = ;
 9  </script>
10</body></html>

Solution

let paragraphe = document.getElementById("nom");
let ancien = paragraphe.textContent;
paragraphe.textContent = "Bonjour " + ancien.toUpperCase();