HTML DOM 元素 textContent
示例
返回元素的文字內容
let text = element.textContent;
自己動手試一試 »
更改 id="demo" 的 <p> 元素的文字內容
element.textContent = "我變了！";
自己動手試一試 »
獲取 id="myList" 的 <ul> 元素的所有文字內容
let text = document.getElementById("myList").textContent;
自己動手試一試 »
描述
textContent 屬性設定或返回指定節點及其所有**後代**的文字內容。
區別
innerHTML、innerText 和 textContent
見下文
語法
返回節點的文字內容
element.textContent或
node.textContent
設定節點的文字內容
element.textContent = text
node.textContent = text
屬性值
| 屬性 | 描述 |
| text | 元素或節點的文字內容。 |
返回值
| 型別 | 描述 |
| 字串 | 元素及其所有後代的文字內容。 如果元素是文件、文件型別或註釋，則返回 null。 |
區別
innerHTML、innerText 和 textContent
| innerHTML 屬性返回 元素的文字內容，包括所有間距和內部 HTML 標籤。 |
| innerText 屬性返回 僅元素的文字內容及其所有子代，不包括 CSS 隱藏文字、間距和標籤，<script> 和 <style> 元素除外。 |
| textContent 屬性返回 元素及其所有後代的文字內容，包括間距和 CSS 隱藏文字，但不包括標籤。 |
HTML 示例
<p id="myP"> 此元素有額外間距 且包含 <span>一個 span 元素</span>。</p>
JavaScript 示例
let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;
自己動手試一試 »
在上面的例子中
| innerText 屬性返回 此元素有額外間距且包含一個 span 元素。 |
| innerHTML 屬性返回 此元素有額外間距 且包含 <span>一個 span 元素</span>。 |
| textContent 屬性返回 此元素有額外間距 且包含一個 span 元素。 |
瀏覽器支援
element.textContent 是 DOM Level 3 (2004) 特性。
所有現代瀏覽器都完全支援它
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
