How to select all elements with a class in JS

Question

I'd like to modify all classes with JS. Is there way to select them without manually setting the array index (for example [0] or [1] or [184])?

Example code:

<div class='message'>something:</div>
<div class='message'>something</div>

const element = document.querySelectorAll(".message");
element.classList.add("color");

It works only when I add [0] and only for the first element that has the class. But I'd like to modify all the elements with the class.

Answer 1

It's important to learn what basic language syntax does first. The [0] is selecting the 0 index of an array (or array-like object). So to operate on them all, you can use a loop with a variable that is incremented starting at 0 and continuing until it goes out of bounds of the array.

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

There are other ways too, but this is a fundamental syntax that should probably be learned first.

Answer 2

Use forEach to iterate over all message nodes and replace emotes. Also note that I'm using a global regexp to replace all :smile: strings within a message, not just the first one.

function replaceEmotes() {
    var messages = document.querySelectorAll(".message");

    messages.forEach(message => {
       message.innerHTML = message.innerHTML.replace(/:smile:/g, "<i class='em em-smile'></i>");
    });
}

Answer 3

document.querySelectorAll() selects all elements of given class name and store them in an array-like object. It is possible to loop through the objects instead of accessing them manually.

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

You can also do the same thing using document.getElementsByClassName()

var elements = document.getElementsByClassName('.className');
for(var i = 0; i < elements.length; i++){
    // Same like above...
}