Module 3Manipuler les éléments d'une page avec le DOM
Chapitre 9 sur 15
Connaître les bases de la manipulation du DOM
Sélectionner les éléments avec querySelector, querySelectorAll et les autres modes d'accès.
- ≈ 105 min
- 3 leçons
- 3 vidéos
- 3 exercices
Module 3Manipuler les éléments d'une page avec le DOM
Chapitre 9 sur 15
Sélectionner les éléments avec querySelector, querySelectorAll et les autres modes d'accès.
Objectifs
Avec ce chapitre, tu sauras…
querySelector() et querySelectorAll() ;id, par classe, par balise, par name ;body, head, title, links, forms ;Avant de modifier un élément, il faut le trouver. C'est l'étape la plus fréquente de tout script : 90 % des lignes qui touchent au DOM commencent par une sélection.
Leçon 1
| Méthode | Renvoie | Si rien ne correspond |
|---|---|---|
document.querySelector(sélecteur) | le premier élément correspondant | null |
document.querySelectorAll(sélecteur) | tous les éléments correspondants (une NodeList) | une liste vide (length = 0) |
Le paramètre est exactement le sélecteur que tu écrirais dans une feuille CSS : tout ce que tu as appris dans le cours CSS sert ici.
querySelector
document.querySelector("p"); // le premier <p> du document
document.querySelector("p.par"); // le premier <p> ayant la classe "par"
document.querySelector("#id1").textContent = "Bonjour !"; // l'élément d'id "id1"
document.querySelector("div > p"); // le premier <p> enfant direct d'un <div>
document.querySelector("a[target]"); // le premier <a> qui a un attribut targetquerySelectorAll
const paras = document.querySelectorAll("p.par");
paras[0].style.backgroundColor = "red"; // le premier seulement
console.log(document.querySelectorAll(".par").length); // combien d'éléments ?
document.querySelectorAll(".par").forEach(p => { // tous
p.style.backgroundColor = "red";
});
for (const lien of document.querySelectorAll("a[target]")) {
lien.style.border = "2px solid red";
}Tableau: Les sélecteurs simples et multiples
| Sélecteur | Sélectionne | Exemple |
|---|---|---|
balise | par type | "li" |
.classe | par classe | ".actif" |
#id | par id | "#menu" |
[attr], [attr="val"] | par attribut | 'input[type="email"]' |
A B | B descendant de A | "nav a" |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Vidéo · À regarder
ENJavaScript DOM Manipulation – Full Course for Beginners
freeCodeCamp.org · YouTube
Leçon 2
| Méthode | Recherche par… | Renvoie |
|---|---|---|
getElementById("p1") | valeur de l'attribut id | un élément ou null |
getElementsByClassName("bleu") | valeur de l'attribut class | une HTMLCollection |
getElementsByTagName("p") | nom de balise | une HTMLCollection |
getElementsByName("ville") |
Leçon 3
| Propriété | Renvoie |
|---|---|
document.body | l'élément <body> |
document.head | l'élément <head> |
document.title | le titre de la page (modifiable) |
document.links | tous les <a> et <area> qui ont un attribut href |
document.forms | tous les formulaires (document.forms["monForm"]) |
1document.querySelector(".info") renvoie…
2Si aucun élément ne correspond, querySelector renvoie…
3Le sélecteur des <li> enfants directs de #menu est…
4On peut appeler forEach directement sur le résultat de…
5"h1, h2" est un sélecteur…
6Pour récupérer tous les boutons radio name="genre" :
L'essentiel du chapitre
querySelector(sel) : le premier élément (ou null) ; querySelectorAll(sel) : tous (NodeList).balise, .classe, #id, [attr], A B, A > B, A, B, :pseudo-classe.style ni de textContent : parcours-la ou prends [0].getElementById, getElementsByClassName, getElementsByTagName, getElementsByName.forEach ; HTMLCollection vivante, sans forEach ; Array.from() pour convertir.document.body, head, title, links, forms, images, URL, cookie.A > B | B enfant direct de A | "ul > li" |
A, B | A et B (sélecteur multiple) | "h1, h2, h3" |
A + B | B juste après A | "h2 + p" |
:pseudo-classe | selon l'état ou la position | "li:first-child", "input:checked", "tr:nth-child(even)" |
valeur de l'attribut name (formulaires) |
| une NodeList |
querySelector(".bleu") | sélecteur CSS | un élément ou null |
querySelectorAll(".bleu") | sélecteur CSS | une NodeList |
NodeList (querySelectorAll) | HTMLCollection (getElementsBy...) | |
|---|---|---|
| mise à jour | statique : photo prise au moment de l'appel | vivante : se met à jour si la page change |
forEach() | oui | non (utiliser for...of) |
accès par indice et length | oui | oui |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
document.images | toutes les images |
document.scripts | tous les éléments <script> |
document.URL | l'adresse de la page, en chaîne |
document.cookie | les cookies de la page, en chaîne |
const premierDiv = document.querySelector("div"); // le premier div du document
premierDiv.querySelector("p").textContent = "1er paragraphe du premier div";
const parasDuDiv = premierDiv.querySelectorAll("p"); // seulement dans ce div
const titres = document.querySelectorAll("h1, h2, h3"); // sélecteur multiplequerySelector et querySelectorAll existent aussi sur chaque élément : formulaire.querySelector("input") ne cherche que dans le formulaire. C'est plus rapide et cela évite de sélectionner par erreur un élément ailleurs dans la page.
Les sélecteurs d'éléments : getElementById, getElementsByClassName, querySelector… (en anglais).
Sélectionner des éléments dans le DOM (en anglais).
Dans une page contenant une liste de 8 stagiaires (<ul id="stagiaires"> avec des <li>), écris un script qui : colore en gris clair une ligne sur deux, met en gras le premier et le dernier stagiaire, et affiche en bas de la liste un paragraphe « 8 stagiaires » calculé automatiquement.
Écris l'instruction JavaScript qui sélectionne : (1) le premier <input> de type email ; (2) toutes les cellules <td> du tableau d'id notes ; (3) le paragraphe qui suit directement un <h2> ; (4) toutes les cases à cocher cochées ; (5) les liens qui s'ouvrent dans un nouvel onglet (target="_blank") ; (6) les lignes paires d'un tableau.
Chaque ligne contient une erreur. Corrige-la.
document.querySelectorAll("p").style.color = "red";
document.getElementsByClassName("titre").textContent = "Bonjour";
document.querySelector("menu").style.display = "none"; // l'élément a id="menu"
document.getElementByID("total").textContent = 0;
document.getElementsByClassName("item").forEach(i => console.log(i));document.getElementById("p1").style.color = "blue";
const bleus = document.getElementsByClassName("bleu");
for (const element of bleus) { // le résumé oublie "const" : variable globale implicite
element.style.color = "blue";
}
const paras = document.getElementsByTagName("p");
for (const p of paras) {
p.style.color = "blue";
}
const choix = document.getElementsByName("ville"); // tous les boutons radio name="ville"getElementById("x") ou querySelector("#x") ;querySelector / querySelectorAll, plus souples (n'importe quel sélecteur CSS). C'est le choix le plus courant dans le code moderne.Tableau: NodeList et HTMLCollection
const items = Array.from(document.getElementsByClassName("item"));
const textes = items.map(item => item.textContent); // toutes les méthodes des tableauxLes NodeList (en anglais).
document.body.style.color = "blue"; // tout le texte en bleu
document.title = "Le DOM"; // change le titre de l'onglet
console.log(document.links.length); // nombre de liens
console.log(document.URL); // l'adresse de la pageLe résumé écrit la propriété url en minuscules : document.url renvoie undefined. La propriété s'écrit document.URL en majuscules (JavaScript est sensible à la casse). On utilise aussi window.location.href.