JavaScript中的TextContent属性

JavaScript提供了很多操作HTML元素的方法和属性，其中一个常用的属性就是textContent。

简介

textContent是指一个元素中的所有文本内容，不包括HTML标记。

例如，在下面这个div元素中：

<div id="myDiv"><h1>Hello, <span>world!</span></h1></div>

它的textContent将返回："Hello, world!"

用法

要获取一个元素的textContent，只需要使用以下代码：

var myElement = document.getElementById('myDiv');
var text = myElement.textContent;

要设置一个元素的textContent，可以使用以下代码：

var myElement = document.getElementById('myDiv');
myElement.textContent = "New text!";

注意事项

1. 改变一个元素的textContent将会覆盖所有原来的子元素和文本，包括HTML标记。
2. 如果你需要保留HTML标记并只改变文本内容，可以考虑使用innerHTML属性。

示例

以下代码片段演示了如何使用textContent来改变一个按钮的文本内容：

<button id="myButton">Click me!</button>

<script>
    var myButton = document.getElementById('myButton');
    myButton.addEventListener('click', function() {
        this.textContent = "You clicked me!";
    });
</script>

输出：

Click me!

点击之后：

You clicked me!