Trouver un élément ou un groupe d'éléments avec getElementById, querySelector et querySelectorAll, et parcourir les résultats.
Sur la page des horaires de bus d'Agadir, on veut mettre en évidence les lignes qui desservent l'aéroport, afficher le nombre de départs, et changer le titre. Avant de modifier quoi que ce soit, il faut trouver les bons éléments. Les sélecteurs CSS du module 04 servent à nouveau : ici, c'est JavaScript qui les utilise.
La page des horaires : un titre et quatre lignes de bus. Deux d'entre elles vont à l'aéroport.
| Méthode | Renvoie |
|---|---|
document.getElementById('titre') | l’élément, ou null |
document.querySelector('sélecteur CSS') | le premier élément, ou null |
document.querySelectorAll('sélecteur CSS') | tous les éléments (NodeList, éventuellement vide) |
document.getElementsByClassName('ligne') | collection vivante (se met à jour seule) |
document.getElementsByTagName('tr') | idem, par balise |
querySelector et querySelectorAll acceptent tous les sélecteurs CSS : c’est ce qu’on utilise le plus aujourd’hui.
document.querySelector('#titre'); // id
document.querySelectorAll('.ligne'); // classe
document.querySelectorAll('h2, h3'); // plusieurs sélecteurs
document.querySelectorAll('table td:last-child'); // descendant + pseudo-classe
document.querySelectorAll('[data-dest="aeroport"]'); // attribut
const lignes = document.querySelectorAll('.ligne');
console.log(lignes.length); // 4
lignes.forEach((tr) => tr.classList.add('surligne')); // pour chacun
const tableau = [...lignes]; // pour map, filter...
querySelector existe aussi sur les éléments : table.querySelectorAll('td') ne cherche que dans ce tableau.
Si le sélecteur ne trouve rien, querySelector renvoie null et la ligne suivante plante (Cannot read properties of null). Vérifiez le sélecteur et que le script s’exécute après le HTML.
On peut appeler une personne par son numéro de CIN (unique) : getElementById. Ou demander « toutes les personnes en rouge » : querySelectorAll('.rouge').
document.getElementById('titre'); // un seul : l'id est unique document.querySelector('.ligne'); // le premier qui correspond document.querySelectorAll('.ligne'); // tous
Tout ce qui marche dans une feuille de style marche dans querySelector : balise, .classe, #id, descendant, attribut, pseudo-classe.
document.querySelectorAll('table tr:nth-child(odd)'); document.querySelector('input[type="email"]');
Écrivez l'instruction qui récupère : (1) l'élément d'id menu ; (2) tous les boutons ; (3) le premier lien du footer ; (4) toutes les cases cochées.
document.getElementById('menu'); // ou querySelector('#menu') document.querySelectorAll('button'); document.querySelector('footer a'); document.querySelectorAll('input[type="checkbox"]:checked');
querySelectorAll renvoie une NodeList. Comment utiliser map ou filter dessus ?
const lignes = [...document.querySelectorAll('.ligne')]; // ou Array.from(...) const heures = lignes.map((tr) => tr.lastElementChild.textContent); // forEach, lui, fonctionne directement sur une NodeList.
Comment chercher seulement les cellules du premier <tr> ?
const premier = document.querySelector('tr'); const cellules = premier.querySelectorAll('td'); // querySelector existe aussi sur chaque élément : la recherche se limite à ses descendants.