Exercices sur la sélection du DOM

Exercice 7 : Manipulation de texte (Sélecteur simple)

Dans le dossier bre05-js-soutien-2, créez un dossier exercice-7.
Dans le dossier exercice-7, créez deux fichiers : index.html et script.js.

index.html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Exercice 7 - Majuscules en CSS</title>
    </head>
    <body>
        <p id="texte-a-modifier">ce texte va passer en majuscules via le style js.</p>
    <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Sélectionnez l'élément <p> en utilisant son identifiant (id).
À l'aide de la propriété .style, modifiez la transformation du texte (textTransform) pour qu'il s'affiche entièrement en majuscules.
Changez également la graisse de la police (`fontWeight) pour mettre le texte en gras.

Exercice 8 : Manipulation de liste (Style et boucles)

Dans le dossier bre05-js-soutien-2, créez un dossier exercice-8.
Dans le dossier exercice-8, créez deux fichiers : index.html et script.js.

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Exercice 8 - Liste colorée</title>
</head>
<body>
    <ul id="ma-liste">
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
        <li>Élément 4</li>
        <li>Élément 5</li>
        <li>Élément 6</li>
        <li>Élément 7</li>
        <li>Élément 8</li>
        <li>Élément 9</li>
        <li>Élément 10</li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Sélectionnez tous les éléments <li> présents dans la page.
À l'aide d'une boucle for, parcourez cette liste d'éléments.
Appliquez une condition : si l'index de l'élément est impair (un sur deux), modifiez uniquement la propriété de style color pour la passer en bleu.

Exercice 9 : Manipulation du Style (Grid Layout)

Dans le dossier bre05-js-soutien-2, créez un dossier exercice-9.
Dans le dossier exercice-9, créez deux fichiers : index.html et script.js.

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Exercice 9 - Modification de grille</title>
    <style>
        #grille {
            display: grid;
            gap: 10px;
            /* La grille est configurée par défaut à 4 colonnes */
            grid-template-columns: repeat(4, 1fr);
        }
        .item {
            background-color: lightgrey;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="grille">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Sélectionnez l'élément avec l'id grille.
Modifiez la propriété CSS gridTemplateColumns via JavaScript pour que la grille n'affiche plus que 2 colonnes par ligne au lieu de 4.
Modifiez également la couleur de fond (backgroundColor) de l'élément grille pour la passer en lightyellow.

16 January 2026