textContent屬性設(shè)置或返回指定節(jié)點(diǎn)及其所有子節(jié)點(diǎn)的文本內(nèi)容。
在節(jié)點(diǎn)上設(shè)置textContent將刪除節(jié)點(diǎn)的所有子節(jié)點(diǎn),并將其替換為具有給定文本的單個文本節(jié)點(diǎn)。
textContent屬性類似于innerText屬性,但是有一些區(qū)別:
textContent返回所有元素的文本內(nèi)容,而innerText則是返回除 <script>和<style>元素之外的所有元素的內(nèi)容。
innerText不會返回隱藏在CSS中的元素的文本(textContent會返回)
要設(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 | 是 | 是 | 是 | 是 | 是 |
| 值 | 描述 |
|---|---|
| text | 指定指定節(jié)點(diǎn)的文本內(nèi)容 |
| 返回值: | 一個字符串,表示節(jié)點(diǎn)及其所有子節(jié)點(diǎn)的文本。如果元素是文檔,文檔類型或符號,則返回null |
|---|---|
| DOM版本: | DOM級別3 |
用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">此元素有額外的間距,并且包含一個<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)簽。
HTML DOM參考:HTMLElement.innerText屬性
HTML DOM參考:element.innerHTML屬性