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 (en-US) 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> (en-US) 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

BCD tables only load in the browser

Especificación