Node.textContent

  • Revision slug: DOM/Node.textContent
  • Revision title: Node.textContent
  • Revision id: 65705
  • Created:
  • Creator: zpao
  • Is current revision? No
  • Comment added missing space; no changes

Revision Content

{{ DomRef() }}

Summary

Gets or sets the text content of a node and its descendants.

Syntax

var text = element.textContent;
element.textContent = "this is some sample text";

Example

// 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>

Notes

  • textContent returns null 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 use document.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 the textContent 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.

Specification

textContent

{{ languages( { "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent", "pl": "pl/DOM/element.textContent" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>Gets or sets the text content of a node and its descendants.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval"><em>var text</em> = element.textContent;
element.textContent = "this is some sample text";
</pre>
<h3 name="Example">Example</h3>
<pre class="eval">// Given the following HTML fragment:
//   &lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text&lt;/div&gt;

// 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:
//   &lt;div id="divA"&gt;This is some text&lt;/div&gt;
</pre>
<h3 name="Notes">Notes</h3>
<ul> <li><code>textContent</code> returns <code>null</code> 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 use<code> document.documentElement.textContent</code>.</li> <li>If the node is a CDATA section, a comment, a processing instruction, or a text node, <code>textContent</code> returns the text inside this node (the <a href="/En/DOM/Node.nodeValue" title="En/DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>).</li> <li>For other node types, <code>textContent</code> returns the concatenation of the <code>textContent</code> attribute value of every child node, excluding comments and processing instruction nodes. This is an empty string if the node has no children.</li> <li>Setting this property on a node removes all of its children and replaces them with a single text node with the given value.</li>
</ul>
<h3 name="Specification">Specification</h3>
<p><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></p>
<p>{{ languages( { "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent", "pl": "pl/DOM/element.textContent" } ) }}</p>
Revert to this revision