HTML DOM Element textContent 屬性

定義和用法

textContent 屬性設置或返回指定節點的文本內容，以及它的所有后代。

如果您設置了 textContent 屬性，會刪除所有子節點，并被替換為包含給定字符串的一個單獨的文本節點。

提示：有時，此屬性可用于取代 nodeValue 屬性，但是請記住此屬性同時會返回所有子節點的文本。

另請參閱：

innerText 屬性

innerHTML 屬性

實例

例子 1

返回元素的文本內容：

let text = element.textContent;

親自試一試

例子 2

更改 id="demo" 的 <p> 元素的文本內容：

element.textContent = "I have changed!";

親自試一試

例子 3

獲取 id="myList" 的 <ul> 元素的所有文本內容：

let text = document.getElementById("myList").textContent;

親自試一試

語法

返回節點的文本內容：

element.textContent

或

node.textContent

設置節點的文本內容：

element.textContent = text
node.textContent = text

屬性值

值 描述
text 元素或節點的文本內容。

返回值

類型 描述
字符串

元素及其所有后代的文本內容。

如果元素是 document、document type 或 notation，則返回 null。

innerHTML、innerText 與 textContent 的區別

innerText 屬性返回：

只返回元素及其所有子元素的文本內容，沒有 CSS 隱藏文本間距和標簽，除了 <script> 和 <style> 元素。

innerHTML 屬性返回：

元素的文本內容，包括所有空白和內部 HTML 標簽。

textContent 屬性返回：

元素和所有后代的文本內容，帶有空白和 CSS 隱藏文本，但沒有標簽。

HTML 實例

<p id="myP">   This element has extra spacing     and contains <span>a span element</span>.</p>

JavaScript 實例

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

親自試一試

在上面的例子中：

innerText 屬性返回：

This element has extra spacing and contains a span element.

innerHTML 屬性返回：

   This element has extra spacing    and contains <span>a span element</span>.

textContent 屬性返回：

   This element has extra spacing    and contains a span element.

瀏覽器支持

element.textContent 是 DOM Level 3 (2004) 特性。

所有瀏覽器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持