Node: textContent 屬性

值

一個字串，或者 null。其值取決於具體情況。

• 如果該節點是 document 或 doctype，則 textContent 返回 null。

  注意：要獲取整個文件的所有文字和 CDATA 資料，請使用 document.documentElement.textContent。

• 如果該節點是 CDATA 部分、註釋、處理指令或文字節點，則 textContent 返回或設定節點內的文字，即 Node.nodeValue。

• 對於其他節點型別，textContent 返回所有子節點的 textContent 的串聯，但不包括註釋和處理指令。（如果節點沒有子節點，則為空字串。）

與 innerText 的區別

不要混淆 Node.textContent 和 HTMLElement.innerText 之間的區別。儘管名稱相似，但它們之間存在重要的差異。

• textContent 獲取所有元素的內容，包括 <script> 和 <style> 元素。相比之下，innerText 只顯示“人類可讀”的元素。
• textContent 返回節點中的所有元素。相比之下，innerText 考慮了樣式，並且不會返回“隱藏”元素的文字。
  • 此外，由於 innerText 會考慮 CSS 樣式，讀取 innerText 的值會觸發 重排，以確保計算樣式是最新的。（重排在計算上可能很昂貴，因此應儘可能避免。）

與 innerHTML 的區別

Element.innerHTML 如其名稱所示，用於獲取或設定 HTML。我們不建議使用 innerHTML 來獲取或設定元素內的文字，因為它處理的是原始 HTML 而不是純文字，並且可能容易受到 XSS 攻擊。即使您確定文字不包含 HTML 語法，它仍然不夠語義化且速度較慢，因為它需要呼叫 HTML 解析器。

示例

從這個 HTML 片段開始。

<div id="divA">This is <span>some</span> text!</div>

您可以使用 textContent 來獲取元素的文字內容。

let text = document.getElementById("divA").textContent;
// The text variable is now: 'This is some text!'

如果您想設定元素的文字內容，可以這樣做：

document.getElementById("divA").textContent = "This text is different!";
// The HTML for divA is now:
// <div id="divA">This text is different!</div>

規範

瀏覽器相容性

另見

• HTMLElement.innerText
• Element.innerHTML