HTML DOM 元素 textContent
示例
返回元素的文本内容
let text = element.textContent;
自己尝试 »
更改具有 id="demo" 的 <p> 元素的文本内容
element.textContent = "我已经改变了！";
自己尝试 »
获取具有 id="myList" 的 <ul> 元素的所有文本内容
let text = document.getElementById("myList").textContent;
自己尝试 »
描述
textContent 属性设置或返回指定节点的文本内容，**以及其所有后代**。
之间的区别
innerHTML、innerText 和 textContent
见下文
语法
返回节点的文本内容
element.textContent或
node.textContent
设置节点的文本内容
element.textContent = text
node.textContent = text
属性值
| 属性 | 描述 |
| text | 元素或节点的文本内容。 |
返回值
| 类型 | 描述 |
| 字符串 | 元素及其所有后代的文本内容。 如果元素是文档、文档类型或符号，则返回 null。 |
之间的区别
innerHTML、innerText 和 textContent
| innerHTML 属性返回 元素的文本内容，包括所有间距和内部 HTML 标签。 |
| innerText 属性返回 仅元素及其所有子节点的文本内容，不包含 CSS 隐藏文本间距和标签，但 <script> 和 <style> 元素除外。 |
| textContent 属性返回 元素及其所有后代的文本内容，包含间距和 CSS 隐藏文本，但不包含标签。 |
HTML 示例
<p id="myP"> 此元素具有额外的间距 并包含 <span>一个跨度元素</span>。</p>
JavaScript 示例
let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;
自己尝试 »
在上面的示例中
| innerText 属性返回 此元素具有额外的间距，并包含一个跨度元素。 |
| innerHTML 属性返回 此元素具有额外的间距 并包含 <span>一个跨度元素</span>。 |
| textContent 属性返回 此元素具有额外的间距 并包含一个跨度元素。 |
浏览器支持
element.textContent 是 DOM Level 3 (2004) 功能。
它在所有现代浏览器中完全受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
