textContent属性设置或返回指定节点及其所有子节点的文本内容。
在节点上设置textContent将删除节点的所有子节点,并将其替换为具有给定文本的单个文本节点。
textContent属性类似于innerText属性,但是有一些区别:
textContent返回所有元素的文本内容,而innerText则是返回除 <script>和<style>元素之外的所有元素的内容。
innerText不会返回隐藏在CSS中的元素的文本(textContent会返回)
要设置或返回元素的HTML内容,请使用innerHTML属性。
返回节点的文本内容:
node.textContent
设置节点的文本内容:
node.textContent = text
var x = document.getElementById("para").textContent;测试看看‹/›
所有浏览器完全支持textContent属性:
属性 | |||||
textContent | 是 | 是 | 是 | 是 | 是 |
值 | 描述 |
---|---|
text | 指定指定节点的文本内容 |
返回值: | 一个字符串,表示节点及其所有子节点的文本。如果元素是文档,文档类型或符号,则返回null |
---|---|
DOM版本: | DOM级别3 |
用id="para"更改<p>元素的文本内容:
var x = document.getElementById("para"); x.textContent = "HELLO WORLD";测试看看‹/›
返回DIV元素的所有文本内容:
var x = document.getElementById("container").textContent;测试看看‹/›
此示例演示了innerText,innerHTML和textContent之间的区别:
<p id="x">此元素有额外的间距,并且包含一个<span>span 元素</span>.</p> <script> function getInnerText() { alert(document.getElementById("x").innerText); } function getInnerHTML() { alert(document.getElementById("x").innerHTML); } function getTextContent() { alert(document.getElementById("x").textContent); } </script>测试看看‹/›
innerText属性仅返回文本,不包含空格和内部元素标签。
innerHTML属性返回带有空格和内部元素标签的文本。
textContent属性返回带间距的文本,但不带内部元素标签。
HTML DOM参考:HTMLElement.innerText属性
HTML DOM参考:element.innerHTML属性