HTML DOM textContent 属性
页面下方有更多实例。
定义和用法
textContent 属性设置或返回指定节点及其所有子节点的文本内容。
如果设置 textContent 属性，所有子节点都将被删除，并替换为包含指定字符串的单个文本节点。
注释: 此属性与 innerText 属性类似，但有一些区别:
- textContent 返回所有元素的文本内容，而innerText返回所有元素的内容，除了<script> 和 <style>元素。
- innerText不会返回使用CSS隐藏的元素的文本（textContent将返回）。 试一试 »
提示: 有时可以使用此属性代替 nodeValue 属性，但请记住，此属性也会返回所有子节点的文本。
提示: 要设置或返回元素的HTML内容，请使用 innerHTML 属性。
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| textContent | 1.0 | 9.0 | Yes | Yes | Yes |
语法
返回节点的文本内容:
node.textContent
设置节点的文本内容:
node.textContent = text
属性值
| 值 | 类型 | 描述 |
|---|---|---|
| text | String | 指定节点的文本内容 |
技术细节
| 返回值: | 一个字符串，表示节点及其所有子节点的文本。 如果元素是文档、文档类型或符号，则返回 null。 |
|---|---|
| DOM 版本 | Core Level 3 Node Object |
更多实例
实例
更改 id="demo" 的<p>元素的文本内容:
document.getElementById("demo").textContent = "Paragraph changed!";
亲自试一试 »
实例
获取 id="myList" 的 <ul> 元素的所有文本内容:
var x = document.getElementById("myList").textContent;
x 的值为:
Coffee Tea
亲自试一试 »
实例
此示例演示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>
亲自试一试 »
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML() {
alert(document.getElementById("demo").innerHTML)
}
function getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
使用指定的属性获取上面 <p> 元素的内容:
innerText 返回: "这个元素有额外的间距，并且包含一个span元素。"
innerHTML 返回: " 这个元素有额外的间距，并且包含 <span>一个span元素</span>."
textContent 返回: " 这个元素有额外的间距，并且包含一个span元素。"
innerText 属性只返回文本，没有间距和内部元素标记。
innerHTML 属性返回文本，包括所有间距和内部元素标记。
textContent 属性返回带间距但不带内部元素标记的文本。
