The textContent
property of the Node
interface represents the text content of a node and its descendants.
Note: textContent
and HTMLElement.innerText
are easily confused, but the two are different in very important ways.
Syntax
var text = Node.textContent; Node.textContent = string;
Return value
A string or null
Description
When getting this property:
- If the node is a document, a DOCTYPE, or a notation,
textContent
returnsnull
. (To get all of the text and CDATA data for the whole document, one could usedocument.documentElement.textContent
.) - If the node is a CDATA section, comment, processing instruction, or text node,
textContent
returns 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.
Setting textContent
on a node removes all of the node's children and replaces them with a single text node with the given string value.
Differences from innerText
Don't get confused by the differences between Node.textContent
and HTMLElement.innerText
. Although the names seem similar, there are important differences:
textContent
gets the content of all 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 a reflow to ensure up-to-date computed styles. (Reflows can be computationally expensive, and thus should be avoided when possible.)- Unlike
textContent
, alteringinnerText
in Internet Explorer (version 11 and below) removes child nodes from the element and permanently destroys all descendant text nodes. It is impossible to insert the nodes again into any other element or into the same element anymore.
Differences from innerHTML
Element.innerHTML
returns HTML, as its name indicates. Sometimes people use innerHTML
to retrieve or write text inside an element, but textContent
has better performance because its value is not parsed as HTML. Moreover, using textContent
can prevent XSS attacks.
Examples
Given this HTML fragment:
<div id="divA">This is <span>some</span> text!</div>
... you can use textContent
to get the element's text content:
let text = document.getElementById('divA').textContent; // The text variable is now: 'This is some text!'
... or set the element's text content:
document.getElementById('divA').textContent = 'This text is different!'; // The HTML for divA is now: // <div id="divA">This text is different!</div>
Polyfill for IE8
// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8 if (Object.defineProperty && Object.getOwnPropertyDescriptor && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) { (function() { var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText"); Object.defineProperty(Element.prototype, "textContent", // Passing innerText or innerText.get directly does not work, // wrapper function is required. { get: function() { return innerText.get.call(this); }, set: function(s) { return innerText.set.call(this, s); } } ); })(); }
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support 3 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'Node.textContent' in that specification. |
Living Standard | No change vs. DOM4 |
DOM4 The definition of 'Node.textContent' in that specification. |
Obsolete | |
Document Object Model (DOM) Level 3 Core Specification The definition of 'Node.textContent' in that specification. |
Obsolete | Introduced |