使用 JavaScript 修改 HTML 元素的文本内容-html教程-PHP中文网

使用 JavaScript 修改 HTML 元素的文本内容

心靈之曲

发布： 2025-09-03 19:05:01

原创

291人浏览过

使用 javascript 修改 html 元素的文本内容

本文旨在提供一个清晰的教程，讲解如何使用 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 集合中的每一个元素。

图改改
在线修改图片文字

455

查看详情
修改文本内容：

在循环内部，可以使用 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 技术，实现更加复杂的功能。

以上就是使用 JavaScript 修改 HTML 元素的文本内容的详细内容，更多请关注php中文网其它相关文章！