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] 时有效，并且仅适用于具有该类的第一个元素。但我想用类修改所有元素。

原文由 Oliver 发布，翻译遵循 CC BY-SA 4.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;
    }
}

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

原文由 ziggy wiggy 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 abadalyan 发布，翻译遵循 CC BY-SA 4.0 许可协议