JavaScript Element textContent 属性

textContent属性设置或返回指定节点及其所有后代的文本内容。如果设置textContent属性，则会删除所有子节点，并将其替换为包含指定字符串的单个Text节点。

注意：此属性类似于innerText属性，但是存在一些差异：

textContent返回所有元素的文本内容，而innerText返回除<script>和<style>元素之外的所有元素的内容。
innerText不会返回用CSS隐藏的元素文本（textContent将会返回）。

提示：有时可以使用此属性而不是nodeValue属性，但请记住此属性也会返回所有子节点的文本。

提示：要设置或返回元素的HTML内容，请使用innerText属性。

实例：

获取元素的文本内容：

var x = document.getElementById("myBtn").textContent;

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
属性
textContent	9.0+	1.0+	支持	支持	支持

语法

返回节点的文本内容：

node.textContent

设置节点的文本内容：

node.textContent = text

属性值

属性值	类型	描述
text	String	指定指定节点的文本内容

技术细节

项目	描述
返回值：	一个字符串，表示节点及其所有后代的文本。如果元素是文档，文档类型或表示法，则返回null。
DOM版本	Dom Core Level 3

更多例子

使用id=“myP”更改<p>元素的文本内容：

document.getElementById("demo").textContent = "段落改变了!";

尝试一下

获取id =“myList”的<ul>元素的所有文本内容：

var x = document.getElementById("myList").textContent;

尝试一下

这个例子演示了innerText，innerHTML和textContent之间的一些区别：

<p id="demo">   This element has extra spacing     and contains <span>a span element</span>.</p>


<script>
function getInnerText() {
  alert(document.getElementById("demo").innerText)
}

function getHTML() {
  alert(document.getElementById("demo").innerHTML)
}

function getTextContent() {
  alert(document.getElementById("demo").textContent)
}
</script>

尝试一下