Exercices de sélection dans le DOM

Exercice 0 : préparation du repository

Créez un repository public avec un README sur GitHub, appelez-le bre05-js-j3
Clonez-le dans le dossier sites/js de votre IDE.

Exercice 1 : changer la couleur du texte

Créez un dossier exercice-1. Dans le dossier exercice-1 créez un fichier index.html et un fichier index.js.

Le contenu du fichier index.html:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" >
        <title>
            Exercice 1 : changer la couleur du texte
        </title>
    </head>
    <body>
        <p id="text">
            Au départ ce texte est en noir. À la fin, il devrait être en rouge.
        </p>
    </body>
    <script type="application/javascript" src="index.js"></script>
</html>

Votre javascript devra faire en sorte que le texte du paragraphe s'affiche en rouge.

Exercice 2 : changer la taille du texte

Créez un dossier exercice-2. Dans le dossier exercice-2 créez un fichier index.html et un fichier index.js.

Le contenu du fichier index.html:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" >
        <title>
            Exercice 2 : changer la taille du texte
        </title>
    </head>
    <body>
        <p id="text">
            Au départ ce texte est petit. À la fin, il devrait être gros.
        </p>
    </body>
    <script type="application/javascript" src="index.js"></script>
</html>

Votre javascript devra faire en sorte que le texte aie une taille de 50px.

Exercice 3 : souligner un texte

Créez un dossier exercice-3. Dans le dossier exercice-3 créez un fichier index.html et un fichier index.js.

Le contenu du fichier index.html:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" >
        <title>
            Exercice 3 : souligner un texte
        </title>
    </head>
    <body>
        <p id="text">
            Au départ ce texte est normal puis je veux indiquer que ce <span>mot</span> est important.
        </p>
    </body>
    <script type="application/javascript" src="index.js"></script>
</html>

Votre javascript devra faire en sorte que le mot contenu dans le <span> soit souligné.

Exercice 4 : barrer un texte

Créez un dossier exercice-4. Dans le dossier exercice-4 créez un fichier index.html et un fichier index.js.

Le contenu du fichier index.html:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" >
        <title>
            Exercice 4 : barrer un texte
        </title>
    </head>
    <body>
        <p id="text">
            Au départ ce texte est normal puis je veux indiquer que <span>ce passage est barré</span>.
        </p>
    </body>
    <script type="application/javascript" src="index.js"></script>
</html>

Votre javascript devra faire en sorte que le mot contenu dans le <span> soit barré.

Exercice 5 : ajouter une classe

Créez un dossier exercice-5. Dans le dossier exercice-5 créez un fichier index.html et un fichier index.js.

Le contenu du fichier index.html:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" >
        <title>
            Exercice 5 : ajouter une classe
        </title>
    </head>
    <body>
        <style>
            .info {
                background-color: #ccc;
                padding-left: 35px
            }
        </style>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </p>
        
        <p>
            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
        </p>
        
        <p>
            In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
        </p>
    
    </body>
    <script type="application/javascript" src="index.js"></script>
</html>

Votre javascript devra faire en sorte que le deuxième paragraphe aie la classe info.

Exercice 6 : retirer une classe

Créez un dossier exercice-6. Dans le dossier exercice-6 créez un fichier index.html et un fichier index.js.

Le contenu du fichier index.html:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" >
        <title>
            Exercice 6 : retirer une classe
        </title>
    </head>
    <body>
        <style>
            .info {
                background-color: #ccc;
                padding-left: 35px
            }
        </style>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </p>
        
        <p>
            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
        </p>
        
        <p class="info">
            In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
        </p>
    
    </body>
    <script type="application/javascript" src="index.js"></script>
</html>

Votre javascript devra faire en sorte que le troisième paragraphe n'aie plus la classe info.

08 January 2026