JavaScript 中使用 getElementsByClassName 修改 innerText

在 JavaScript 中，getElementsByClassName 函数可用于获取具有特定类名的所有元素的集合。而 innerText 属性则用于设置或获取元素的文本内容。在本文中，我们将演示如何使用 getElementsByClassName 函数来修改多个元素的 innerText 属性。

获取元素集合

首先，我们需要使用 getElementsByClassName 函数来获取具有特定类名的所有元素的集合。下面是一个简单的示例代码，它使用 getElementsByClassName 获取所有类名为 my-class 的元素并将它们存储在一个变量中：

var elements = document.getElementsByClassName('my-class');

在示例代码中，变量 elements 将保存一个包含所有类名为 my-class 的元素的集合。

遍历元素集合并修改 innerText 属性

接下来，我们需要遍历 elements 集合并修改每个元素的 innerText 属性。为此，我们可以使用 for 循环来遍历集合中的元素，如下所示：

for(var i = 0; i < elements.length; i++) {
  elements[i].innerText = "Hello, world!";
}

在示例代码中，我们使用了一个 for 循环来遍历 elements 集合，并将每个元素的 innerText 属性设置为 "Hello, world!"。

完整示例代码

最后，以下是一个完整的示例代码，在该代码中，我们获取所有类名为 my-class 的元素并将它们的 innerText 属性设置为 "Hello, world!"：

var elements = document.getElementsByClassName('my-class');
for(var i = 0; i < elements.length; i++) {
  elements[i].innerText = "Hello, world!";
}

总结

使用 getElementsByClassName 和 innerText 函数可以很容易地修改多个元素的文本内容。需要注意的是，getElementsByClassName 获取的是一个元素集合，需要使用循环来遍历每个元素并进行操作。