Le DOM (Document Object Model) est une représentation structurée de votre page HTML
que JavaScript peut lire et modifier. Chaque élément HTML devient un "objet" que vous pouvez manipuler.
Pourquoi c'est important : Le DOM permet de créer des pages web interactives en temps réel,
sans recharger la page. Vous pouvez changer du texte, modifier des styles, ajouter/supprimer des éléments...
Aujourd'hui : Apprendre à sélectionner des éléments HTML avec JavaScript
et à lire leur contenu avec textContent et innerHTML.
1. getElementById()
Sélectionne un élément par son attribut id (le plus rapide et précis).
// HTML : <div id="titre">Bonjour</div>
let element = document.getElementById('titre');
console.log(element); // <div id="titre">...</div>
// Lire le texte
console.log(element.textContent); // 'Bonjour'
// ⚠️ Retourne null si l'id n'existe pas let inexistant = document.getElementById('xyz');
console.log(inexistant); // null
Démo interactive
Cliquez sur le bouton pour me sélectionner !
2. querySelector()
Sélectionne le premier élément qui correspond à un sélecteur CSS.
// Par id (comme CSS : #) let titre = document.querySelector('#titre');
// Par classe (comme CSS : .) let boite = document.querySelector('.ma-classe');
// Par balise let premier = document.querySelector('p');
// Sélecteur complexe let lien = document.querySelector('div.menu a');
// ⚠️ Retourne null si aucun match
Démo interactive
Je suis la première boîte avec la classe "highlight-me"
Je suis la deuxième boîte (non sélectionnée)
3. querySelectorAll()
Sélectionne tous les éléments qui correspondent à un sélecteur CSS.
Retourne une NodeList (comme un tableau).
// Sélectionner tous les paragraphes let paragraphes = document.querySelectorAll('p');
console.log(paragraphes.length); // Nombre de <p>
// Parcourir avec forEach
paragraphes.forEach(p => {
console.log(p.textContent);
});
// Accéder à un élément spécifique let premier = paragraphes[0];
// ⚠️ Retourne une NodeList vide [] si aucun match
Démo interactive
Boîte 1
Boîte 2
Boîte 3
4. textContent vs innerHTML
textContent : Lit/modifie uniquement le texte brut. innerHTML : Lit/modifie le HTML complet (balises incluses).
// HTML : <div id="test"><b>Bonjour</b> monde</div>
// innerHTML : HTML complet
console.log(div.innerHTML); // "<b>Bonjour</b> monde"
// ⚠️ innerHTML peut être dangereux avec des données utilisateur
Démo interactive
Texte en gras et texte normal
Console JavaScript Interactive - Testez les sélecteurs DOM !
Prêt à exécuter votre code...
Exemples pratiques - Sélection DOM
// Exemple complet : Analyser une page
// 1. Compter tous les liens de la page let liens = document.querySelectorAll('a');
console.log('Nombre de liens:', liens.length);
// 2. Lire le titre de la page let titre = document.querySelector('h1');
console.log('Titre:', titre.textContent);
// 3. Récupérer toutes les images let images = document.querySelectorAll('img');
images.forEach(img => {
console.log('Image:', img.src);
});
// 4. Trouver tous les éléments avec une classe spécifique let boites = document.querySelectorAll('.demo-box');
console.log('Nombre de boîtes demo:', boites.length);
// 5. Lire le contenu d'un élément spécifique let intro = document.querySelector('.demo-intro'); if (intro) {
console.log('Texte intro:', intro.textContent.substring(0, 50) + '...');
}
Testez ces exemples dans la console interactive ci-dessus !
Froggiesplaining :
Objectifs de ce cours :
✅ Comprendre ce qu'est le DOM
✅ Sélectionner des éléments avec getElementById()
✅ Utiliser querySelector() et querySelectorAll()
✅ Différencier textContent et innerHTML
✅ Lire le contenu des éléments HTML
Points clés à retenir :
• getElementById('id') : Sélection par ID (le plus rapide)
• querySelector('.classe') : Premier élément qui match (sélecteur CSS)
• querySelectorAll('p') : Tous les éléments qui match (retourne NodeList)
• textContent : Texte brut uniquement (sécurisé)
• innerHTML : HTML complet avec balises (attention XSS)
• Toujours vérifier si l'élément existe avant de l'utiliser (if)
• querySelectorAll retourne une NodeList, utilisez forEach() pour parcourir
Exercice pratique :
1. Sélectionnez l'élément avec l'id "demo-title" et affichez son textContent
2. Comptez tous les paragraphes de la page avec querySelectorAll
3. Sélectionnez toutes les div avec la classe "demo-box"
4. Parcourez-les avec forEach et affichez leur contenu
5. Comparez textContent et innerHTML sur l'élément #content-demo
6. Bonus : Trouvez tous les boutons et affichez leur texte
7. Bonus 2 : Sélectionnez le premier élément avec querySelector('.demo-item') et lisez son HTML
