Node.textContent
The Node.textContent
property represents the text content of a node and its descendants.
Syntax
JavaScript
Copy Code
var text = element.textContent; element.textContent = "this is some sample text";
Description
textContent
returnsnull
if the element is a document, a document type, or a notation. To grab all of the text and CDATA data for the whole document, one could usedocument.documentElement.textContent
.- If the node is a CDATA section, a comment, a processing instruction, or a text node,
textContent
returns the text inside this node (the nodeValue). - For other node types,
textContent
returns the concatenation of thetextContent
attribute value of every child node, excluding comments and processing instruction nodes. This is an empty string if the node has no children. - Setting this property on a node removes all of its children and replaces them with a single text node with the given value.
Differences from innerText
Internet Explorer introduced element.innerText
. The intention is similar but with the following differences:
- While
textContent
gets the content of all elements, including<script>
and<style>
elements, the IE-specific propertyinnerText
does not. innerText
is aware of style and will not return the text of hidden elements, whereas textContent will.- As
innerText
is aware of CSS styling, it will trigger a reflow, whereastextContent
will not. - Unlike
textContent
, alteringinnerText
in Internet Explorer (up to version 11 inclusive) not just removes child nodes from the element, but also permanently destroys all descendant text nodes (so it is impossible to insert the nodes again into any other element or into the same element anymore).
Differences from innerHTML
innerHTML
returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML
. textContent
should be used instead. Because the text is not parsed as HTML, it's likely to have better performance. Moreover, this avoids an XSS attack vector.
Example
JavaScript
Copy Code
// Given the following HTML fragment: // <div id="divA">This is <span>some</span> text</div> // Get the text content: var text = document.getElementById("divA").textContent; // |text| is set to "This is some text". // Set the text content: document.getElementById("divA").textContent = "This is some text"; // The HTML for divA is now: // <div id="divA">This is some text</div>
Polyfill for IE8
JavaScript
Copy Code
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", { get: function() { return innerText.get.call(this); }, set: function(s) { return innerText.set.call(this, s); } } ); })(); }
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1+ | 2 | 9 | 9.64 (possibly earlier) | 3 (possibly earlier) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'Node.textContent' in that specification. |
Living Standard | No changes versus DOM4 |
DOM4 The definition of 'Node.textContent' in that specification. |
Working Draft | |
Document Object Model (DOM) Level 3 Core Specification The definition of 'Node.textContent' in that specification. |
Recommendation | Introduced |
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/node/textcontent