Sélection d'éléments DOM en JavaScript

Avant de pouvoir modifier quoi que ce soit sur une page avec JavaScript — mettre à jour du texte, basculer une classe, attacher un gestionnaire de clic — vous devez d'abord trouver l'élément que vous souhaitez. Cet acte de recherche s'appelle sélectionner un élément DOM. Ce chapitre couvre toutes les méthodes dont vous avez besoin, explique ce que chacune retourne et montre quand utiliser laquelle.

Que signifie « sélectionner un élément »

Le Document Object Model (DOM) est la représentation en direct, en forme d'arbre, de votre HTML par le navigateur. Chaque balise devient un objet nœud que vous pouvez lire et modifier depuis JavaScript. La sélection est le processus de localisation d'un ou plusieurs de ces nœuds afin de pouvoir conserver une référence vers eux dans une variable :

const heading = document.querySelector('h1');
// `heading` now points at the real <h1> on the page.

Une fois cette référence obtenue, tout le reste — la lecture des attributs et propriétés, la modification des styles, l'ajout de gestionnaires d'événements — s'effectue sur elle.

Les méthodes de sélection se divisent en deux groupes :

• Recherches par ID / classe / balise — rapides, renvoient des collections live (sauf getElementById).
• Recherches par sélecteur CSS (querySelector, querySelectorAll) — flexibles, acceptent n'importe quel sélecteur CSS, renvoient un résultat statique.

Sélectionner un élément par son ID : getElementById

La façon la plus rapide d'obtenir un seul élément est de passer par son id unique. Cette méthode renvoie l'élément, ou null si aucun élément avec cet ID n'existe.

const element = document.getElementById('example');
element.textContent = 'You selected the element by its ID!';

Les ID étant censés être uniques, getElementById renvoie un seul élément (pas une collection) et constitue la recherche la plus directe et la plus performante.

Sélectionner par nom de classe : getElementsByClassName

Cette méthode renvoie une HTMLCollection live de tous les éléments portant la classe donnée. « Live » signifie que la collection se met à jour automatiquement à mesure que le DOM évolue.

const elements = document.getElementsByClassName('example');
Array.from(elements).forEach((element, index) => {
    element.textContent = `Element ${index + 1} changed!`;
});

Une HTMLCollection ressemble à un array mais n'en est pas un, elle ne possède donc pas forEach/map. Convertissez-la avec Array.from() (ou le spread [...elements]) avant d'utiliser des méthodes de tableau.

Sélectionner par nom de balise : getElementsByTagName

Sélectionne tous les éléments portant un nom de balise donné et renvoie une HTMLCollection live.

const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.backgroundColor = 'yellow';
}

Passez '*' pour correspondre à tous les éléments de la page. C'est pratique lorsque vous souhaitez opérer sur toutes les balises d'un type, comme mettre en surbrillance tous les paragraphes.

Sélectionner par attribut name : getElementsByName

Renvoie une NodeList live d'éléments partageant le même attribut name. C'est particulièrement utile pour les contrôles de formulaire — par exemple, tous les boutons radio d'un même groupe :

const options = document.getElementsByName('plan');
options.forEach((radio) => {
    radio.addEventListener('change', () => {
        console.log('Selected plan:', radio.value);
    });
});

Pour une gestion plus approfondie des formulaires, consultez travailler avec les formulaires dans le DOM.

Sélectionner avec des sélecteurs CSS : querySelector

querySelector renvoie le premier élément correspondant à n'importe quel sélecteur CSS que vous passez, ou null si rien ne correspond. C'est la méthode de sélection d'un seul élément la plus polyvalente.

const element = document.querySelector('.example');
element.style.backgroundColor = 'lightblue';

Comme elle accepte la syntaxe complète des sélecteurs CSS, vous pouvez cibler en profondeur : querySelector('nav ul li.active a') trouve le premier lien correspondant sans enchaîner plusieurs appels.

Sélectionner toutes les correspondances : querySelectorAll

Renvoie une NodeList statique de tous les éléments correspondant au sélecteur. Contrairement à getElementsBy..., cet instantané ne se met pas à jour si le DOM change par la suite.

const elements = document.querySelectorAll('.example');
elements.forEach((element, index) => {
    element.style.backgroundColor = 'lightgreen';
    element.textContent = `Element ${index + 1} highlighted!`;
});

Une NodeList possède une vraie méthode forEach, vous pouvez donc l'itérer directement. Pour utiliser map/filter, convertissez-la d'abord avec Array.from(elements).

Limiter une recherche à un élément

Toutes les méthodes querySelector* et getElementsBy* existent aussi sur des éléments individuels, pas seulement sur document. Les appeler sur un élément restreint la recherche à ses descendants :

const card = document.querySelector('.card');
const title = card.querySelector('.title'); // only inside .card

Limiter la portée accélère les requêtes et évite de faire correspondre accidentellement des éléments ailleurs sur la page.

Tester un élément : matches

matches ne renvoie pas un élément — elle renvoie true/false selon qu'un élément donné correspond ou non à un sélecteur CSS. Elle est idéale dans les gestionnaires d'événements et la délégation d'événements.

const element = document.getElementById('test');
if (element.matches('.example')) {
    element.style.color = 'red';
    element.textContent = 'Element matches the selector!';
}

Remonter dans l'arbre : closest

closest part de l'élément lui-même et remonte à travers ses ancêtres, renvoyant le plus proche qui correspond au sélecteur (ou null). C'est la façon la plus propre de trouver un élément conteneur.

const element = document.getElementById('child');
const parent = element.closest('.outer');
parent.style.border = '2px solid red';

Combiner des sélecteurs pour un ciblage précis

Les sélecteurs CSS se composent, vous pouvez donc être aussi précis que nécessaire sans code supplémentaire :

const element = document.querySelector('.example.special');
element.style.backgroundColor = 'pink';
element.textContent = 'Special element highlighted!';

Ici .example.special correspond à un élément qui possède les deux classes. Vous pouvez enchaîner des combinateurs (>, espace descendant, +, ~), des sélecteurs d'attribut (input[type="email"]) et des pseudo-classes (li:first-child).

Quelle méthode utiliser ?

Règles générales :

• Utilisez par défaut querySelector / querySelectorAll — une API cohérente avec toute la puissance du CSS.
• Utilisez getElementById quand vous avez un ID unique et souhaitez la recherche la plus rapide possible.
• N'utilisez une collection live (getElementsBy...) que si vous avez besoin qu'elle suive les changements du DOM ; sinon préférez le querySelectorAll statique.

Erreurs courantes

• Résultats null. getElementById, querySelector et closest renvoient tous null en l'absence de correspondance. Vérifiez toujours avant d'utiliser le résultat.
• Exécution avant que le DOM existe. Si votre script s'exécute dans <head> avant que les éléments soient analysés, les sélections ne renvoient rien. Placez les scripts à la fin de <body>, utilisez defer, ou attendez DOMContentLoaded.
• Les collections ne sont pas des arrays. HTMLCollection ne possède pas forEach. NodeList a forEach mais pas map/filter. Convertissez avec Array.from() en cas de doute.

Conclusion

Sélectionner des éléments est le point d'entrée de toute tâche DOM. Pour la plupart du code, querySelector et querySelectorAll offrent une API flexible et propulsée par CSS ; getElementById reste le choix le plus rapide pour les ID uniques ; et matches / closest permettent une délégation d'événements propre. Une fois que vous pouvez sélectionner des éléments de manière fiable, continuez avec la manipulation du DOM et le parcours du DOM.

Pratique