ThetextContent property of theNode interface represents the text content of the node and its descendants.

Value

A string, ornull. Its value depends on the situation:

• If the node is adocument or adoctype,textContent returnsnull.

  Note:To getall of the text andCDATA data for the whole document, usedocument.documentElement.textContent.

• If the node is aCDATA section, a comment, aprocessing instruction, or atext node,textContent returns, or sets, the text inside the node, i.e., theNode.nodeValue.

• For other node types,textContent returns the concatenation of thetextContent of every child node, excluding comments and processing instructions. (This is an empty string if the node has no children.)

Differences from innerText

Don't get confused by the differences betweenNode.textContent andHTMLElement.innerText. Although the names seem similar, there are important differences:

• textContent gets the content ofall elements, including<script> and<style> elements. In contrast,innerText only shows "human-readable" elements.
• textContent returns every element in the node. In contrast,innerText is aware of styling and won't return the text of "hidden" elements.
  • Moreover, sinceinnerText takes CSS styles into account, reading the value ofinnerText triggers areflow to ensure up-to-date computed styles. (Reflows canbe computationally expensive, and thus should be avoided when possible.)

Differences from innerHTML

Element.innerHTML gets or sets HTML, as its name indicates. We advise against usinginnerHTML to get or set text inside an element because it deals with raw HTML rather than plain text and can be susceptible toXSS attacks. Even if you are sure that the text never contains HTML syntax, it is still less semantic and slower because it needs to invoke the HTML parser.

Examples

Start with this HTML fragment.

<div>This is <span>some</span> text!</div>

You can usetextContent to get the element's text content:

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

If you prefer to set the element's text content, you can do:

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

Specifications

Browser compatibility

See also

• HTMLScriptElement.textContent andHTMLScriptElement.text
• HTMLElement.innerText
• Element.innerHTML