HTML DOM 元素 textContent

示例

返回元素的文本内容：

let text = element.textContent;

亲自试一试 »

更改 id="demo" 的 <p> 元素的文本内容：

element.textContent = "I have changed!";

亲自试一试 »

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

let text = document.getElementById("myList").textContent;

亲自试一试 »

描述

这个textContent属性设置或返回指定节点的文本内容，及其所有后代。

笔记

当你放textContent 属性时，所有子节点都将被删除并仅替换为一个新的文本节点。

也可以看看：

内部文本属性

innerHTML 属性

之间的差异
innerHTML、innerText 和 textContent

见下文

语法

返回节点的文本内容：

element.textContent

node.textContent

设置节点的文本内容：

element.textContent = text

node.textContent = text

适当的值

属性	描述
文本	元素或节点的文本内容。

返回值

类型	描述
字符串	元素及其所有后代的文本内容。退货`null`如果元素是文档、文档类型或符号。

之间的差异
innerHTML、innerText 和 textContent

innerHTML 属性返回：
元素的文本内容，包括所有间距和内部 HTML 标记。

innerText 属性返回：
仅元素及其所有子元素的文本内容，没有 CSS 隐藏文本间距和标签，<script> 和 <style> 元素除外。

textContent 属性返回：
元素及其所有后代的文本内容，带有间距和 CSS 隐藏文本，但没有标签。

HTML 示例

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

JavaScript 示例

let text = document.getElementById("myP").innerText;

let text = document.getElementById("myP").innerHTML;

let text = document.getElementById("demo").textContent;

亲自试一试 »

在上面的例子中：

innerText 属性返回：
该元素具有额外的间距并包含一个 span 元素。

innerHTML 属性返回：
该元素具有额外的间距并包含<span>一个span元素</span>。

textContent 属性返回：
该元素具有额外的间距并包含一个 span 元素。

浏览器支持

element.textContent是 DOM Level 3 (2004) 功能。

所有现代浏览器都完全支持它：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	11

HTML DOM 元素 textContent

示例

描述

笔记

也可以看看：

之间的差异innerHTML、innerText 和 textContent

语法

适当的值

返回值

之间的差异innerHTML、innerText 和 textContent

HTML 示例

JavaScript 示例

浏览器支持

之间的差异
innerHTML、innerText 和 textContent

之间的差异
innerHTML、innerText 和 textContent