Je voudrais modifier toutes les classes avec JS. Existe-t-il un moyen de les sélectionner sans définir manuellement l'index du tableau (par exemple [0] ou [1] ou [184])?
Exemple de code:
const element = document.querySelectorAll(".message"); element.classList.add("color");
<div class='message'>something:</div> <div class='message'>something</div>
Cela ne fonctionne que lorsque j'ajoute [0]
et uniquement pour le premier élément qui a la classe. Mais j'aimerais modifier tous les éléments avec la classe.
4 Réponses :
Il est important d'apprendre ce que fait la syntaxe de base du langage en premier. Le [0]
sélectionne l'index 0
d'un tableau (ou d'un objet de type tableau). Donc, pour les exploiter tous, vous pouvez utiliser une boucle avec une variable qui est incrémentée en commençant à 0
et en continuant jusqu'à ce qu'elle sorte des limites du tableau.
function replaceEmotes() { var messages = document.querySelectorAll(".message"); for (var i = 0; i < messages.length; i++) { var str = messages[i].innerHTML.replace(":smile:", "<i class='em em-smile'></i>"); messages[i].innerHTML = str; } }
Il existe également d'autres moyens, mais c'est une syntaxe fondamentale qui devrait probablement être apprise en premier.
vous pouvez utiliser document.getElementsByClassName("message")
et parcourir tous les éléments de NodeList
Utilisez forEach pour parcourir tous les nœuds de message et remplacer les émoticônes. Notez également que j'utilise une expression rationnelle globale pour remplacer all :smile:
strings dans un message, pas seulement le premier.
function replaceEmotes() { var messages = document.querySelectorAll(".message"); messages.forEach(message => { message.innerHTML = message.innerHTML.replace(/:smile:/g, "<i class='em em-smile'></i>"); }); }
document.querySelectorAll()
sélectionne tous les éléments du nom de classe donné et les stocke dans un objet de type tableau. Il est possible de parcourir les objets en boucle au lieu d'y accéder manuellement.
var elements = document.getElementsByClassName('.className'); for(var i = 0; i < elements.length; i++){ // Same like above... }
Vous pouvez également faire la même chose en utilisant document.getElementsByClassName()
var elements = document.querySelectorAll('.className'); for(var i = 0; i < elements.length; i++){ var str = elements[i].innerHTML; elements[i].innerHTML = str.replace(":smile:", "<i class='em em-smile'></i>"); }