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

【问题标题】：How to select all elements with a class in JS如何在JS中选择具有类的所有元素
【发布时间】：2019-08-14 08:49:15
【问题描述】：

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

示例代码：

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

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

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

【问题讨论】：

你需要循环所有元素而不是使用 [0] 并使用 [0] 来更改每个元素的内部 html
见这篇文章：stackoverflow.com/questions/15843581/…

标签： javascript html

【解决方案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;
    }
}

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

【讨论】：

@Oliver：我添加了代码，但同样，你真的应该自己学习这些基础知识。
谢谢！！ :) 抱歉，我是 javaScript 新手，我是 PHP 开发人员，只学习 JS。谢谢

【解决方案2】：

您可以使用document.getElementsByClassName("message") 并遍历NodeList 中的所有元素

【讨论】：

【解决方案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...
}

【讨论】：

【解决方案4】：

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

【讨论】：