本文旨在提供一个清晰的教程，讲解如何使用 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 技术，实现更加复杂的功能。
评论（已关闭）
评论已关闭