Le DOM vu de JavaScript

Objectifs

À la fin de cette leçon, vous saurez :

• situer window et document dans le navigateur ;
• sélectionner des éléments avec querySelector ;
• modifier contenu, attributs et classes.

window et document

Dans le navigateur, JavaScript reçoit deux objets globaux :

window   → la fenêtre elle-même (dimensions, alert, localStorage...)
document → la page chargée (l'entrée vers le DOM)

Le DOM est l'arbre d'objets construit par le navigateur (chapitre précédent) : votre code JS le lit et le modifie, puis le moteur relance layout/paint pour refléter les changements.

Sélectionner des éléments

<h1 id="titre">Mon site</h1>
<p class="intro">Bienvenue.</p>
<ul id="liste"><li>Un</li><li>Deux</li></ul>

document.querySelector("#titre");     // premier élément correspondant
document.querySelector(".intro");
document.querySelector("h1");         // sélecteurs CSS complets acceptés
document.querySelectorAll("#liste li"); // TOUS les résultats (NodeList)

querySelector prend n'importe quel sélecteur CSS — tout ce que vous savez du CSS ciblage s'applique ici. Retour null si rien ne correspond : vérifiez toujours avant d'utiliser le résultat.

Modifier le DOM

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

titre.textContent = "Nouveau titre";        // texte
titre.setAttribute("lang", "fr");           // attribut
titre.classList.add("actif");               // classe (+ remove / toggle)
titre.style.color = "navy";                 // style direct (usage ponctuel)

Préférez classList aux manipulations directes de className : add/remove/toggle sont lisibles et composables. Le vrai style se gère en CSS ; JS se contente d'ajouter/retirer des classes.

Créer et insérer

const li = document.createElement("li");
li.textContent = "Trois";
document.querySelector("#liste").appendChild(li);

Trois gestes : créer un élément détaché, le remplir, l'accrocher quelque part dans l'arbre.

Exercice

1. Ouvrez votre CV et sa console : changez le h1, ajoutez une classe au header.
2. Écrivez un script qui ajoute « — brouillon » à la fin du title.
3. Créez dynamiquement une liste <ul> de vos trois commandes terminal préférées.
4. Que renvoie document.querySelector("#inexistant") ? Testez avant de répondre.

Résumé

• document = porte d'entrée du DOM depuis JS.
• querySelector(All) réutilise les sélecteurs CSS.
• Modifier = textContent / setAttribute / classList ; créer = createElement + appendChild.

const el = document.querySelector("#inexistant");
if (el) { el.textContent = "x"; }