如何在JS中选择具有类的所有元素

Question

我想用JS修改所有类。有没有办法在不手动设置数组索引的情况下选择它们（例如 [0] 或 [1] 或 [184]）？

示例代码：

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

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

它仅在我添加[0]并且仅适用于具有该类的第一个元素时才有效。但我想用类修改所有元素。

Answer 1

首先了解基本语言语法的作用很重要。的[0]是选择0的阵列（或阵列状物体）的索引。因此，要对它们全部进行操作，您可以使用一个带有变量的循环，该变量从 开始0并继续递增，直到它超出数组范围。

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

还有其他方法，但这是一个可能应该首先学习的基本语法。

Answer 2

使用 forEach 迭代所有消息节点并替换表情。另请注意，我使用全局正则表达式来替换:smile:消息中的所有字符串，而不仅仅是第一个字符串。

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()选择给定类名的所有元素并将它们存储在类似数组的对象中。可以循环访问对象而不是手动访问它们。

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

您也可以使用做同样的事情document.getElementsByClassName()

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