📘 Chapitre 5 – Sélecteurs DOM : getElementById, querySelector

1. 🎯 Objectif pédagogique

Apprendre à sélectionner des éléments HTML avec JavaScript en utilisant les méthodes getElementById et querySelector pour interagir avec le DOM (Document Object Model).

2. 📚 Concepts abordés

  • Qu’est-ce que le DOM
  • Accéder à un élément par son identifiant (getElementById)
  • Sélectionner un élément avec un sélecteur CSS (querySelector)
  • Différence entre querySelector et querySelectorAll
  • Afficher des informations sur un élément (innerText, innerHTML)

3. 🧠 Explication théorique

Le DOM est une représentation en mémoire d’une page web. JavaScript peut accéder et modifier les éléments de la page via le DOM.

Exemple – getElementById :

let titre = document.getElementById("titre-principal");
console.log(titre.innerText);

Exemple – querySelector :

let bouton = document.querySelector(".btn");
console.log(bouton.innerText);
  • getElementById("id") cible un élément par son identifiant.
  • querySelector("sélecteur") utilise la même syntaxe que CSS (classes, balises, id).

querySelectorAll :

let items = document.querySelectorAll("li");
console.log(items.length); // nombre d’éléments <li>

4. 🛠 Tutoriel pratique

Résumé

Nous allons créer un script qui récupère un titre et un bouton pour afficher leurs textes dans la console.

Arborescence du projet 

mon_projet/
├── index.html
└── script.js

Étape 1 : Fichier HTML 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Sélecteurs DOM</title>
</head>
<body>
  <h1 id="titre-principal">Bienvenue sur ma page</h1>
  <button class="btn">Cliquez ici</button>

  <script src="script.js"></script>
</body>
</html>

Étape 2 : Code JavaScript 

let titre = document.getElementById("titre-principal");
console.log("Texte du titre : " + titre.innerText);

let bouton = document.querySelector(".btn");
console.log("Texte du bouton : " + bouton.innerText);

Étape 3 : Test

Ouvre index.html, regarde la console, et vérifie les textes affichés.

5. 🧾 Résumé et points-clés

  • document.getElementById() sélectionne un élément par son id.
  • document.querySelector() permet de cibler avec un sélecteur CSS.
  • Ces méthodes sont essentielles pour manipuler le contenu d’une page.