Relawan kami belum menerjemahkan artikel ini ke bahasa Bahasa Indonesia. Bergabunglah dan bantu kami menyelesaikannya!
Anda juga dapat membaca artikel ini dalam English (US).

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:

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, since innerText takes CSS styles into account, reading the value of innerText triggers a reflow to ensure up-to-date computed styles. (Reflows can be computationally expensive, and thus should be avoided when possible.)
  • Unlike textContent, altering innerText 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
textContentChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

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

See also