如何使用 JavaScript 更改标签的文本？

1. 简介

在 Web 开发中，经常需要更改标签的文本。这可以通过 JavaScript 实现。在本文中，我们将介绍如何在 JavaScript 中更改标签的文本。

2. 获取元素

在更改标签的文本之前，我们需要先获取标签元素。可以使用 document.getElementById() 方法获取指定 ID 的元素，也可以使用 document.getElementsByClassName() 和 document.getElementsByTagName() 方法获取指定类名或标签名的元素。

// 获取 id 为 "my-element" 的元素
var element = document.getElementById("my-element");
// 获取类名为 "my-class" 的元素列表
var elements = document.getElementsByClassName("my-class");
// 获取所有的 h1 元素
var h1Elements = document.getElementsByTagName("h1");

3. 更改文本

获取到元素后，就可以更改它的文本了。可以通过元素的 innerHTML 或 textContent 属性更改元素的文本内容。

3.1. 使用 innerHTML 属性

可以使用元素的 innerHTML 属性更改文本内容。例如，将 div 元素的文本更改为 "Hello, world!"：

var divElement = document.getElementById("my-div");
divElement.innerHTML = "Hello, world!";

注意：innerHTML 属性不仅可以更改文本内容，还可以包含 HTML 标签。因此，如果使用 innerHTML 属性更改文本，需要确保文本内容是可信的。否则，可能会导致跨站脚本攻击（XSS）。

3.2. 使用 textContent 属性

如果不希望更改的文本内容也包含 HTML 标签，可以使用元素的 textContent 属性。例如，将 p 元素的文本更改为 "Hello, world!"：

var pElement = document.getElementById("my-p");
pElement.textContent = "Hello, world!";

4. 示例

以下是一个更改 div 元素和 p 元素文本的完整示例：

// 获取 id 为 "my-div" 的 div 元素
var divElement = document.getElementById("my-div");
// 获取 id 为 "my-p" 的 p 元素
var pElement = document.getElementById("my-p");
// 更改 div 元素的文本内容为 "Hello, world!"，包含 strong 标签
divElement.innerHTML = "Hello, world!";
// 更改 p 元素的文本内容为 "Hello, world!"，不包含 HTML 标签
pElement.textContent = "Hello, world!";

以上代码将 div 元素的文本更改为 "Hello, world!"，其中 strong 标签被用来强调 "world"。将 p 元素的文本更改为 "Hello, world!"。

5. 总结

在本文中，我们介绍了如何使用 JavaScript 更改标签的文本。使用 document.getElementById()、document.getElementsByClassName() 或 document.getElementsByTagName() 方法获取元素，然后使用 innerHTML 或 textContent 属性更改元素的文本内容。

请注意：在更改文本内容时，需要确保内容是可信的，并避免跨站脚本攻击。