Semaine 3 - Jour 2 | Manipulation du DOM

Modifier le DOM en temps réel

Maintenant que vous savez sélectionner des éléments, apprenons à les modifier : changer leurs attributs, leurs styles CSS, ajouter/supprimer des classes, et créer de nouveaux éléments.

Applications concrètes : Changer la couleur d'un bouton au survol, afficher/masquer du contenu, modifier une image, ajouter dynamiquement des éléments à une liste...

Aujourd'hui : setAttribute/getAttribute, .style, classList, createElement et appendChild.

1. Modifier les attributs

setAttribute() : Modifier un attribut HTML.
getAttribute() : Lire un attribut HTML.

                        // Modifier l'attribut src d'une image

                        let img = document.querySelector('img');

                        img.setAttribute('src', 'nouvelle-image.jpg');

                        // Modifier l'attribut href d'un lien

                        let lien = document.querySelector('a');

                        lien.setAttribute('href', 'https://google.com');

                        // Lire un attribut

                        let url = lien.getAttribute('href');

                        console.log(url);

                        // Raccourci : accès direct à certains attributs

                        img.src = 'image.jpg'; // Équivalent

Démo interactive

2. Modifier les styles CSS

Utiliser .style pour modifier directement les styles CSS d'un élément.

                        // Modifier la couleur de fond

                        let div = document.querySelector('.ma-div');

                        div.style.backgroundColor = '#f39c12';

                        // Modifier plusieurs styles

                        div.style.color = 'white';

                        div.style.padding = '20px';

                        div.style.fontSize = '18px';

                        // Attention : CSS camelCase (background-color → backgroundColor)

                        div.style.borderRadius = '10px';

                        // Lire un style

                        console.log(div.style.backgroundColor);

Démo interactive

Changez mon style avec les boutons !

3. Gérer les classes CSS

classList permet d'ajouter, supprimer, basculer des classes CSS facilement.

                        let element = document.querySelector('.ma-div');

                        // Ajouter une classe

                        element.classList.add('active');

                        // Supprimer une classe

                        element.classList.remove('hidden');

                        // Basculer (toggle) une classe

                        element.classList.toggle('active');

                        // Vérifier si une classe existe

                        if (element.classList.contains('active')) {

                          console.log('Element is active');

                        }

Démo interactive

Cliquez pour activer/désactiver

4. Créer et ajouter des éléments

createElement() : Créer un nouvel élément.
appendChild() : Ajouter un élément enfant.

                        // Créer un nouveau paragraphe

                        let p = document.createElement('p');

                        p.textContent = 'Nouveau paragraphe';

                        // L'ajouter au body

                        document.body.appendChild(p);

                        // Créer un élément avec styles

                        let div = document.createElement('div');

                        div.textContent = 'Hello';

                        div.style.color = 'red';

                        div.classList.add('ma-classe');

                        // L'ajouter à un conteneur

                        let container = document.querySelector('.container');

                        container.appendChild(div);

Démo interactive

Conteneur : Les éléments apparaîtront ici

Exemples pratiques - Galerie d'images dynamique

                    // Créer une galerie d'images dynamique

                    let images = [

                      'image1.jpg',

                      'image2.jpg',

                      'image3.jpg'

                    ];

                    let galerie = document.querySelector('.galerie');

                    // Pour chaque image

                    images.forEach((src, index) => {

                      // Créer un conteneur

                      let container = document.createElement('div');

                      container.classList.add('image-container');

                      // Créer l'image

                      let img = document.createElement('img');

                      img.src = src;

                      img.alt = `Image ${index + 1}`;

                      img.style.width = '200px';

                      img.style.borderRadius = '10px';

                      // Créer une légende

                      let caption = document.createElement('p');

                      caption.textContent = `Image ${index + 1}`;

                      caption.style.textAlign = 'center';

                      // Assembler

                      container.appendChild(img);

                      container.appendChild(caption);

                      galerie.appendChild(container);

                    });

Testez ces exemples dans la console interactive ci-dessus !

Semaine 3 - Jour 2 : Manipulation du DOM

Modifier le DOM en temps réel

1. Modifier les attributs

Démo interactive

2. Modifier les styles CSS

Démo interactive

3. Gérer les classes CSS

Démo interactive

4. Créer et ajouter des éléments

Démo interactive

Exemples pratiques - Galerie d'images dynamique