JavaScript 如何更改所有 HTML 标签内的文本

在网页开发中，经常会遇到需要动态更改HTML标签内文本的情况。JavaScript作为一种强大的脚本语言，为我们提供了多种方法来实现这一功能。

我们可以使用document.querySelectorAll方法来选择所有需要更改文本的HTML标签。这个方法会返回一个节点列表，包含了所有匹配的元素。例如，如果我们想要更改所有<p>标签内的文本，可以这样写：

const paragraphs = document.querySelectorAll('p');
paragraphs.forEach((paragraph) => {
    paragraph.textContent = '新的文本内容';
});

在上述代码中，我们首先使用document.querySelectorAll选择了所有的<p>标签，然后使用forEach方法遍历这个节点列表，将每个<p>标签的文本内容设置为新的文本。

如果我们想要根据标签的类名或ID来更改文本，也可以使用类似的方法。比如，我们有一个类名为my-class的标签，想要更改它的文本内容，可以这样做：

const elements = document.querySelectorAll('.my-class');
elements.forEach((element) => {
    element.textContent = '更改后的文本';
});

除了使用textContent属性来更改文本内容，我们还可以使用innerHTML属性。textContent只会设置纯文本内容，而innerHTML可以解析并设置包含HTML标签的内容。例如：

const divs = document.querySelectorAll('div');
divs.forEach((div) => {
    div.innerHTML = '<strong>加粗的新文本</strong>';
});

需要注意的是，在使用innerHTML时要小心避免XSS攻击，确保设置的内容是可信的。

另外，如果我们想要在特定的事件触发时更改文本，比如点击按钮时更改所有标签的文本，可以给按钮添加一个点击事件监听器，在事件处理函数中执行更改文本的代码。

通过JavaScript的相关方法，我们可以方便地更改所有HTML标签内的文本，从而实现动态的网页交互效果，提升用户体验。在实际应用中，根据具体需求选择合适的方法来操作DOM元素的文本内容。