Sélectionner un élément

🖥️ Nouveau : l'éditeur HTML/CSS/JS

À partir de ce module, tu travailles avec de vraies pages web ! L'interface a changé :

3 onglets d'édition (à gauche) :

• HTML : le contenu de la page (balises, texte)
• CSS : le style (couleurs, tailles, marges)
• JS : le code JavaScript que tu vas écrire

Aperçu web (à droite, en haut) :

• Tu vois ta page se construire en temps réel
• C'est comme un mini-navigateur

Console (à droite, en bas) :

• Tes console.log() apparaissent ici
• Les erreurs aussi, avec des explications

🎯 Objectif

Apprendre à sélectionner des éléments HTML depuis JavaScript avec document.querySelector().

📖 Comment ça marche ?

Jusqu'ici, tu as utilisé JavaScript tout seul. Maintenant, tu vas connecter JavaScript au HTML pour interagir avec les éléments de la page.

document.querySelector() : ta télécommande

document.querySelector() est une méthode qui cherche un élément dans la page HTML et te le retourne.

const titre = document.querySelector("#titre")

Décomposons :

• document : représente toute la page HTML
• .querySelector() : cherche le premier élément qui correspond au sélecteur
• "#titre" : le sélecteur CSS à chercher (ici, l'élément avec id="titre")

Que retourne querySelector ?

querySelector retourne un objet Element : c'est une représentation JavaScript de l'élément HTML. Grâce à cet objet, tu peux ensuite lire ou modifier l'élément :

const titre = document.querySelector("#titre")

// Lire son contenu texte
console.log(titre.textContent)  // "Bienvenue"

// Modifier son contenu (on verra ça à l'exercice suivant)
titre.textContent = "Salut !"

Si aucun élément ne correspond, querySelector retourne null.

Les sélecteurs CSS

Tu connais déjà les sélecteurs CSS du cours 113 ! querySelector utilise exactement la même syntaxe :

📝 Consigne

Regarde le HTML à gauche : il y a un <h1 id="titre"> et un <p class="intro">.

Dans l'onglet JS, remplace les "???" par les bons sélecteurs CSS :

1. Pour l'id "titre" → quel sélecteur CSS cible un id ?
2. Pour la classe "intro" → quel sélecteur CSS cible une classe ?

Les console.log() sont déjà écrits : ils afficheront le texte de chaque élément.

Résultat attendu dans la console :

Bienvenue
Ceci est l'introduction