极客笔记HTML 如何使用 JavaScript 改变元素的文本内容
在本文中，我们将介绍如何使用 JavaScript 改变 HTML 元素的文本内容。通过 JavaScript，我们可以轻松地修改页面上的文本，实现动态的效果和交互。
阅读更多：HTML 教程
getElementById 方法获取元素
在 JavaScript 中，我们可以使用 getElementById 方法根据元素的唯一标识符来获取元素。通过该方法获取到的元素对象，我们就可以直接访问和修改元素的文本内容。
下面是一个例子，演示了如何使用 JavaScript 改变指定元素的文本内容：
<!DOCTYPE html>
<html>
<body>
<h1 id="myHeading">欢迎来到我的网站！</h1>
<button onclick="changeText()">点击修改文本内容</button>
<script>
function changeText() {
var heading = document.getElementById("myHeading");
heading.innerHTML = "这是新的文本内容！";
}
</script>
</body>
</html>
在上面的例子中，我们首先给 <h1> 元素定义了一个 id 为 “myHeading”，然后在 JavaScript 中定义了一个 changeText 函数。当按钮被点击时，changeText 函数将获取到 <h1> 元素，并使用 innerHTML 属性修改其文本内容为 “这是新的文本内容！”。
innerHTML 属性修改元素文本
innerHTML 属性是 HTML DOM 对象的一个属性，用于设置或获取指定元素的 HTML 内容。通过 JavaScript，我们可以使用 innerHTML 属性轻松修改元素的文本内容。
例如，我们可以使用以下代码将 <p> 元素的文本内容修改为 “这是新的段落内容！”：
<!DOCTYPE html>
<html>
<body>
<p id="myParagraph">这是旧的段落内容。</p>
<button onclick="changeText()">点击修改文本内容</button>
<script>
function changeText() {
var paragraph = document.getElementById("myParagraph");
paragraph.innerHTML = "这是新的段落内容！";
}
</script>
</body>
</html>
在上述代码中，我们同样使用了 getElementById 方法获取到了 <p> 元素，并使用 innerHTML 属性修改了其文本内容。
innerText 属性修改元素文本
除了使用 innerHTML 属性，我们还可以使用 innerText 属性修改元素的文本内容。与 innerHTML 属性不同的是，innerText 只会修改元素的纯文本内容，不会解析其中的 HTML 代码。
以下是使用 innerText 属性修改文本内容的一个例子：
<!DOCTYPE html>
<html>
<body>
<p id="myParagraph">这是旧的段落内容。<b>这是加粗的文本。</b></p>
<button onclick="changeText()">点击修改文本内容</button>
<script>
function changeText() {
var paragraph = document.getElementById("myParagraph");
paragraph.innerText = "这是新的段落内容！";
}
</script>
</body>
</html>
在上面的例子中，我们同样使用了 getElementById 方法获取到了 <p> 元素，并使用 innerText 属性修改了其文本内容。需要注意的是，使用 innerText 修改文本时，其中的 HTML 标签将被视为普通文本而不会被解析。
textContent 属性修改元素文本
除了 innerHTML 和 innerText 属性，我们还可以使用 textContent 属性修改元素的文本内容。与 innerText 类似，textContent 也只会修改元素的纯文本内容。
以下是使用 textContent 属性修改文本内容的一个例子：
<!DOCTYPE html>
<html>
<body>
<p id="myParagraph">这是旧的段落内容。<b>这是加粗的文本。</b></p>
<button onclick="changeText()">点击修改文本内容</button>
<script>
function changeText() {
var paragraph = document.getElementById("myParagraph");
paragraph.textContent = "这是新的段落内容！";
}
</script>
</body>
</html>
在上述代码中，textContent 属性被用于修改 <p> 元素的文本内容。与前面的例子类似，textContent 不会解析其中的 HTML 标签，而是直接将其作为纯文本展示。
总结
通过 JavaScript，我们可以使用 getElementById 方法获取元素对象，进而通过 innerHTML、innerText 或 textContent 属性轻松地修改元素的文本内容。这使得我们能够根据用户的操作或其他条件，实现动态的文本内容变化，从而提升网页的交互性和用户体验。
以上是关于如何使用 JavaScript 改变元素文本内容的介绍和示例。使用这些方法和属性，你将能够自由地操作和修改 HTML 元素的文本内容，创造出更丰富多样的网页效果。