HTML DOM textContent 屬性

HTML DOM Element 對象

textContent屬性設(shè)置或返回指定節(jié)點(diǎn)及其所有子節(jié)點(diǎn)的文本內(nèi)容。

在節(jié)點(diǎn)上設(shè)置textContent將刪除節(jié)點(diǎn)的所有子節(jié)點(diǎn)，并將其替換為具有給定文本的單個(gè)文本節(jié)點(diǎn)。

textContent屬性類似于innerText屬性，但是有一些區(qū)別：

• textContent返回所有元素的文本內(nèi)容，而innerText則是返回除 <script>和<style>元素之外的所有元素的內(nèi)容。

• innerText不會(huì)返回隱藏在CSS中的元素的文本(textContent會(huì)返回)

要設(shè)置或返回元素的HTML內(nèi)容，請使用innerHTML屬性。

語法：

返回節(jié)點(diǎn)的文本內(nèi)容：

node.textContent

設(shè)置節(jié)點(diǎn)的文本內(nèi)容：

node.textContent = text

var x = document.getElementById("para").textContent;

瀏覽器兼容性

所有瀏覽器完全支持textContent屬性：

屬性
textContent	是	是	是	是	是

屬性值

技術(shù)細(xì)節(jié)

更多實(shí)例

用id="para"更改<p>元素的文本內(nèi)容：

var x = document.getElementById("para");
x.textContent = "HELLO WORLD";

返回DIV元素的所有文本內(nèi)容：

var x = document.getElementById("container").textContent;

此示例演示了innerText，innerHTML和textContent之間的區(qū)別：

<p id="x">此元素有額外的間距，并且包含一個(gè)<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屬性僅返回文本，不包含空格和內(nèi)部元素標(biāo)簽。

innerHTML屬性返回帶有空格和內(nèi)部元素標(biāo)簽的文本。

textContent屬性返回帶間距的文本，但不帶內(nèi)部元素標(biāo)簽。

相關(guān)參考

HTML DOM參考：HTMLElement.innerText屬性

HTML DOM參考：element.innerHTML屬性

HTML DOM Element 對象