Comment manipuler le DOM avec JavaScript

Le DOM : votre page HTML vue par JavaScript

Le DOM (Document Object Model) est la représentation de votre page HTML comme un arbre d’objets que JavaScript peut lire et modifier. Chaque balise HTML est un « nœud » que vous pouvez cibler, modifier, créer ou supprimer.

Sélectionner des éléments

// Par ID (le plus rapide, retourne 1 élément)
const titre = document.getElementById('titre-principal');

// Par classe (retourne une collection)
const cartes = document.getElementsByClassName('carte');

// Par sélecteur CSS (le plus flexible)
const premiereCarte = document.querySelector('.carte');         // 1er élément
const toutesCartes = document.querySelectorAll('.carte');       // Tous les éléments
const lien = document.querySelector('nav a.active');           // Sélecteur complexe
const input = document.querySelector('input[type="email"]');   // Par attribut

// Parcourir les résultats
toutesCartes.forEach(carte => {
    console.log(carte.textContent);
});

Modifier le contenu

const element = document.getElementById('message');

// Modifier le texte (sécurisé, pas de HTML interprété)
element.textContent = 'Nouveau message texte';

// Modifier le HTML (attention aux injections XSS !)
element.innerHTML = '<strong>Message</strong> en <em>gras</em>';

// Lire le contenu
console.log(element.textContent);  // Texte brut
console.log(element.innerHTML);    // Code HTML

Modifier les styles

const boite = document.querySelector('.boite');

// Modifier un style directement
boite.style.backgroundColor = '#667eea';
boite.style.padding = '20px';
boite.style.borderRadius = '12px';
boite.style.color = 'white';

// Ajouter / retirer des classes (méthode recommandée)
boite.classList.add('visible');
boite.classList.remove('cache');
boite.classList.toggle('active');  // Ajoute si absent, retire si présent
boite.classList.contains('active');  // true ou false

// Exemple pratique : afficher/cacher un modal
function toggleModal() {
    document.getElementById('modal').classList.toggle('visible');
}

Modifier les attributs

const image = document.querySelector('img');
const lien = document.querySelector('a');

// Lire un attribut
console.log(image.getAttribute('src'));
console.log(image.alt);  // Raccourci pour les attributs standard

// Modifier un attribut
image.setAttribute('src', 'nouvelle-image.jpg');
image.alt = 'Description mise à jour';
lien.href = 'https://itskillscenter.io';

// Attributs data- (données personnalisées)
const carte = document.querySelector('.carte');
carte.dataset.id = '42';           // Crée data-id="42"
carte.dataset.categorie = 'web';   // Crée data-categorie="web"
console.log(carte.dataset.id);     // "42"

Créer et ajouter des éléments

// Créer un élément
const nouvelArticle = document.createElement('div');
nouvelArticle.className = 'carte';
nouvelArticle.innerHTML = `
    <h3>Nouvel article</h3>
    <p>Description de l'article</p>
    <button class="btn-lire">Lire la suite</button>
`;

// Ajouter à la page
const conteneur = document.getElementById('articles');
conteneur.appendChild(nouvelArticle);        // À la fin
conteneur.prepend(nouvelArticle);            // Au début
conteneur.insertBefore(nouvelArticle, ref);  // Avant un élément

// Méthode moderne : insertAdjacentHTML
conteneur.insertAdjacentHTML('beforeend', `
    <div class="carte">
        <h3>Article ajouté</h3>
    </div>
`);
// Positions : 'beforebegin', 'afterbegin', 'beforeend', 'afterend'

Supprimer des éléments

// Supprimer un élément
const element = document.getElementById('a-supprimer');
element.remove();

// Supprimer un enfant
const parent = document.getElementById('liste');
const enfant = parent.querySelector('.item');
parent.removeChild(enfant);

// Vider tout le contenu d'un élément
parent.innerHTML = '';

Naviguer dans l’arbre DOM

const element = document.querySelector('.carte');

// Parent
element.parentElement;

// Enfants
element.children;           // Collection d'enfants
element.firstElementChild;  // Premier enfant
element.lastElementChild;   // Dernier enfant

// Frères (siblings)
element.nextElementSibling;     // Élément suivant
element.previousElementSibling; // Élément précédent

// Ancêtre le plus proche qui correspond au sélecteur
element.closest('.conteneur');  // Remonte dans l'arbre

Exemple complet : Todo List

// HTML : <input id="tache-input"> <button id="ajouter">+</button> <ul id="liste"></ul>

const input = document.getElementById('tache-input');
const btnAjouter = document.getElementById('ajouter');
const liste = document.getElementById('liste');

// Ajouter une tâche
btnAjouter.addEventListener('click', () => {
    const texte = input.value.trim();
    if (!texte) return;
    
    const li = document.createElement('li');
    li.innerHTML = `
        <span>${texte}</span>
        <button class="supprimer">✕</button>
    `;
    
    // Clic sur la tâche = barré
    li.querySelector('span').addEventListener('click', () => {
        li.classList.toggle('fait');
    });
    
    // Supprimer
    li.querySelector('.supprimer').addEventListener('click', () => {
        li.remove();
    });
    
    liste.appendChild(li);
    input.value = '';
    input.focus();
});

Résumé des méthodes DOM

Exercice pratique