本文旨在提供一个清晰的教程，讲解如何使用 JavaScript 修改 HTML 元素的文本内容。我们将通过一个具体的例子，演示如何通过 getElementsByClassName 方法选取元素，并使用循环遍历修改其 innerText 属性，最终实现动态改变页面文本的效果。
获取元素并修改文本
在 Web 开发中，经常需要使用 JavaScript 动态修改 HTML 页面上的内容。其中，修改元素的文本内容是一个常见的需求。以下是如何使用 JavaScript 实现这一功能的详细步骤：
-
获取元素：
首先，需要通过 JavaScript 获取到想要修改的 HTML 元素。document.getElementsByClassName() 方法可以根据类名获取一组元素。请注意，方法名是 getElementsByClassName，而不是 getElementByClassName（单数形式）。
立即学习“Java免费学习笔记（深入）”；
const elements = document.getElementsByClassName("first-txt");这行代码会获取所有 class 属性为 "first-txt" 的 HTML 元素，并将它们存储在一个名为 elements 的 HTMLCollection 对象中。
-
遍历元素：
由于 getElementsByClassName() 返回的是一个 HTMLCollection 对象，可能包含多个元素，因此需要使用循环来遍历这些元素。
for (let i = 0; i < elements.length; i++) { // 在这里修改每个元素的文本内容 }这段代码使用 for 循环遍历 elements 集合中的每一个元素。
-
修改文本内容：
在循环内部，可以使用 innerText 属性来修改元素的文本内容。
elements[i].innerText = "temp3";
这行代码将当前循环到的元素的文本内容设置为 "temp3"。
完整示例代码
将以上步骤组合起来，得到完整的 JavaScript 代码如下：
function changeText() {
const elements = document.getElementsByClassName("first-txt");
for (let i = 0; i < elements.length; i++) {
elements[i].innerText = "temp3";
}
}
// 在页面加载完成后执行该函数
window.onload = changeText;这段代码定义了一个名为 changeText 的函数，该函数获取所有 class 属性为 "first-txt" 的元素，并将它们的文本内容修改为 "temp3"。 window.onload = changeText; 确保在页面完全加载后执行该函数，避免因元素尚未加载而导致无法获取的情况。
相应的 HTML 代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.temp {
margin: 3%;
position: relative;
}
.first-txt {
position: absolute;
top: 17px;
left: 50px;
}
.second-txt {
position: absolute;
bottom: 20px;
left: 10px;
}
</style>
</head>
<body>
<div class="temp">
<img src="">
<h3 class="first-txt">
Temp1
</h3>
<h3 class="second-txt">
Temp2
</h3>
</div>
</body>
</html>注意事项
- 确保元素已加载： 务必确保在 JavaScript 代码执行时，目标 HTML 元素已经加载到页面上。可以将 JavaScript 代码放在 <body> 标签的底部，或者使用 window.onload 事件来确保页面加载完成后再执行代码。
- 方法名拼写： 务必注意 getElementsByClassName 的拼写，避免拼写错误。
- HTMLCollection 是动态的： getElementsByClassName 返回的 HTMLCollection 是一个动态集合。这意味着，如果在 JavaScript 代码执行过程中，页面上的元素发生变化，HTMLCollection 也会随之更新。
- 使用 let 或 const 声明变量： 推荐使用 let 或 const 声明变量，避免变量提升等问题。
总结
通过本文的教程，你已经学会了如何使用 JavaScript 修改 HTML 元素的文本内容。掌握了 getElementsByClassName 方法和 innerText 属性的使用，可以灵活地动态改变网页上的文本，实现更加丰富的交互效果。在实际开发中，可以根据具体需求，结合其他 JavaScript 技术，实现更加复杂的功能。
