Aperçu — 6.1 — Le DOM et les sélecteurs — Yekola

Retour

Module 1 : Introduction à JavaScript

1.1 — Premiers pas en JavaScript Aperçu

🛠️ Projet 1 — Explorateur console

Module 2 : Opérateurs et conditions

2.1 — Conditions et logique Aperçu

🛠️ Projet 2 — Calculateur

Module 3 : Fonctions et portée

3.1 — Écrire et utiliser des fonctions Aperçu

🛠️ Projet 3 — Calculatrice

Module 4 : Boucles et tableaux

4.1 — Tableaux et boucles Aperçu

🛠️ Projet 4 — Analyse de notes

Module 5 : Objets et JSON

5.1 — Objets JavaScript Aperçu

🛠️ Projet 5 — Gestionnaire de produits

Module 6 : DOM — Sélectionner des éléments

6.1 — Le DOM et les sélecteurs Aperçu

🛠️ Projet 6 — Explorateur DOM

Module 7 : DOM — Modifier le contenu et le style

7.1 — Modifier la page Aperçu

🛠️ Projet 7 — Compteur de clics

Module 8 : Événements

8.1 — Écouter les événements Aperçu

🛠️ Projet 8 — Formulaire interactif

Module 9 : Formulaires dynamiques et validation

9.1 — Validation avancée Aperçu

🛠️ Projet 9 — Inscription complète

Module 10 : API Fetch — Requêtes HTTP

10.1 — Fetch et async/await Aperçu

🛠️ Projet 10 — Liste d'utilisateurs

Module 11 : Manipulation de données — filter, map, reduce

11.1 — Filter, Map, Reduce Aperçu

🛠️ Projet 11 — Tableau de bord

Module 12 : Stockage local — localStorage

12.1 — Persister des données Aperçu

🛠️ Projet 12 — Préférences persistantes

Module 13 : Modules et organisation du code

13.1 — Modules ES6 Aperçu

🛠️ Projet 13 — Refactorisation modulaire

Module 14 : Projet final — Site interactif complet

14.1 — Application web interactive Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement

Module 6 : DOM — Sélectionner des éléments Aperçu gratuit

6.1 — Le DOM et les sélecteurs

📋 Objectifs d'apprentissage

Comprendre ce qu'est le DOM
Utiliser querySelector et querySelectorAll
Sélectionner par ID, classe, balise
Parcourir une NodeList

Le DOM : la page vue par JavaScript

Le DOM (Document Object Model) est la représentation de votre page HTML sous forme d'arbre que JavaScript peut lire et modifier. Chaque balise devient un nœud accessible via document.

Les sélecteurs à connaître

document.querySelector("h1")       // Premier h1
document.querySelector(".btn")     // Premier élément .btn
document.querySelector("#header")  // Élément avec id="header"
document.querySelectorAll(".card") // TOUS les éléments .card (NodeList)

💡 Cibler un formulaire

const form = document.querySelector("#contact-form"); — vous tenez le formulaire dans une variable. Vous pouvez maintenant le manipuler, écouter ses événements, lire ses champs.

Ceci est un aperçu gratuit.
Voir la formation complète