Simplifier la modification de style sur plusieurs éléments avec querySelectorAll

Question

Bonjour Louis voilà un bout de code : let div = document.createElement('div'); div.innerHTML = 'Accueil / un autre lien'; document.body.append(div); let a = document.querySelectorAll('a'); a[0].style.color ="red"; a[1].style.color = "red"; y a t il un moyen d'écrire les 2 dernières lignes en une seule . merci

Louis-Nicolas Leuillet · Accepted Answer

Oui, complètement, et tu as même plusieurs façons de le faire.
La plus simple et la plus propre dans ton cas, c’est de boucler sur tous les liens plutôt que de les cibler un par un. Comme querySelectorAll te renvoie une liste, tu peux appliquer le style à chacun sans te soucier de combien il y en a. Du coup, en une seule logique, tu fais le job pour tous les <a> présents.
Concrètement, l’idée c’est: tu sélectionnes tous les liens, tu parcours la liste, et tu appliques la couleur. Comme ça, si demain tu ajoutes un troisième lien, ton code continue de fonctionner sans rien modifier.
Et si tu veux vraiment une version ultra concise, tu peux aussi passer par forEach , qui est justement fait pour ça. Ça reste très lisible, et surtout beaucoup plus scalable que cibler [0] et [1] à la main.
document.querySelectorAll('a').forEach(a => {
a.style.color = 'red';
});

Patrick Rasteil · Answer

merci beaucoup pour ta réponse Louis

Simplifier la modification de style sur plusieurs éléments avec querySelectorAll

Formation JavaScript (legacy)