JavaScript 如何更改标签文本

在网页开发中，常常需要通过 JavaScript 来动态更改标签文本，这一操作能为网页带来更丰富的交互体验。接下来我们就深入探讨一下如何使用 JavaScript 实现这一功能。

一、获取元素

在更改标签文本之前，首先要获取到需要操作的 HTML 元素。这可以通过多种方法实现，比如使用 getElementById、getElementsByClassName、querySelector 等。

使用 getElementById 是最为常见的方式。假设 HTML 中有一个 <p> 标签，其 id 为 “myParagraph”：<p id="myParagraph">原始文本</p>，在 JavaScript 中可以这样获取：const myPara = document.getElementById('myParagraph');。

getElementsByClassName 用于通过类名获取元素集合。若有多个元素共享一个类名 “example”，可以使用 const elements = document.getElementsByClassName('example'); 来获取所有具有该类名的元素。

querySelector 则更为灵活，它支持使用 CSS 选择器来获取元素。例如 const element = document.querySelector('div p');，这会获取页面中第一个 <div> 元素内的 <p> 元素。

二、更改文本内容

获取到元素后，就可以更改其文本内容了。对于大多数元素，我们可以使用 textContent 属性。

接着上面获取到的 myPara 元素，若要将其文本更改为 “新的文本”，只需执行 myPara.textContent = '新的文本'; 即可。textContent 会将元素内的所有文本内容替换掉，包括子元素的文本。

如果使用 innerHTML 属性，则会解析插入的 HTML 代码。比如 myPara.innerHTML = '<strong>加粗的新文本</strong>';，这样不仅会更改文本，还会将 <strong> 标签解析，使文本加粗显示。

但需要注意的是，使用 innerHTML 时要谨慎，因为如果插入了来自用户输入的内容，可能会导致跨站脚本攻击（XSS）。

三、实时更新示例

我们来看一个实时更新的示例。在 HTML 中有一个按钮和一个 <p> 标签：

<button onclick="changeText()">点击我</button>
<p id="result">初始文本</p>

在 JavaScript 中定义 changeText 函数：

function changeText() {
  const resultPara = document.getElementById('result');
  resultPara.textContent = '按钮被点击了！';
}

当用户点击按钮时，changeText 函数被调用，<p> 标签的文本就会更新。

通过以上方法，利用 JavaScript 更改标签文本变得轻松简单，开发者可以根据具体需求灵活运用这些技巧，打造出交互性更强、更具活力的网页。