Node.textContent

La propiedad textContent de la interfaz Node representa el contenido de texto de un nodo y sus dencendientes.

Nota: textContent y HTMLElement.innerText son confundidos con facilidad, pero ambos son diferentes en varias formas importantes.

Sintaxis

var text = Node.textContent;
Node.textContent = string;

Valor devuelto

Una cadena de texto o null

Descripción

Al obtener esta propiedad:

Estableciendo textContent en un nodo elimina todos sus hijos y los reemplaza con un solo nodo de texto con el valor dado.

Diferencias con innerText

Internet Explorer introdujo elemento.innerText. La intención es muy parecida, con un par de diferencias:

  • Note que mientras textContent lee el contenido de todos los elementos, incluyendo los elementos <script> y <style>, innerText, no.
  • innerText también tiene en cuenta el estilo y no retornará el texto de elementos escondidos, mientras que textContent sí lo hará.
  • Como innerText tiene en cuenta el estilo CSS, escribirlo disparará un reflow, mientras que textContent no lo hará.

Diferencias con innerHTML

innerHTML retorna el HTML como su nombre indica. Con bastante frecuencia, para leer o escribir texto en un elemento, la gente usa innerHTML. textContent debería usarse en su lugar. Ya que el texto no es procesado es más probable que tenga mejor rendimiento. Además, esto evita un vector de ataques XSS.

Ejemplo

// Dado el siguiente fragmento HTML:
//   <div id="divA">Esto <span>es</span>un texto</div>

// Lee el contenido textual:
var text = document.getElementById("divA").textContent;
// |text| contiene la cadena "Esto es un texto".

// Escribe el contenido textual:
document.getElementById("divA").textContent = "Esto es un nuevo texto";
// El HTML "divA" ahora contiene una nueva cadena:
//   <div id="divA">Esto es un nuevo texto</div>

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
textContentChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo 1IE Soporte completo SiOpera Soporte completo SiSafari Soporte completo 3WebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo

Especificación

Especificación Estado Comentario
DOM
La definición de 'Node.textContent' en esta especificación.
Living Standard Sin cambios desde DOM 4
DOM4
La definición de 'Node.textContent' en esta especificación.
Obsolete  
Document Object Model (DOM) Level 3 Core Specification
La definición de 'Node.textContent' en esta especificación.
Obsolete Introducido