2
votes

Comment sélectionner tous les éléments avec une classe dans JS

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.

javascript html

2 commentaires

Au lieu d'utiliser [0], vous devez boucler tous les éléments et utiliser [0] pour changer le code HTML interne de chaque élément

voir cet article: stackoverflow.com/questions/15843581/...

4 Réponses :

3
votes

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.

2 commentaires

@Oliver: J'ai ajouté du code, mais encore une fois, vous devriez vraiment apprendre ce truc de base et fondamental par vous-même.

Merci!! :) et désolé, je suis nouveau en javaScript, je suis un développeur PHP et j'apprends seulement JS. Merci

1
votes

vous pouvez utiliser document.getElementsByClassName("message") et parcourir tous les éléments de NodeList

0 commentaires

0
votes

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>");
    });
}

0 commentaires

0
votes

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>");
}

0 commentaires