HTML DOM textContent 属性

HTML DOM Element 对象

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	是	是	是	是	是

属性值

技术细节

更多实例

用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属性

HTML DOM Element 对象