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:

  • Si el nodo es un documento, un DOCTYPE, o una notation, textContent devuelve null. (Para obtener todo el texto y los datos de CDATA data (en-US) del documento completo, uno podría usar document.documentElement.textContent.)
  • Si el nodo es una sección CDATA (en-US), un comentario, una instrucción de procesamiento (en-US), o un nodo de texto, textContent devuelve el texto dentro del nodo, por ejemplo, el Node.nodeValue.
  • Para otros tipos de nodos, textContent retorna la concatenación del atributo textContent de todos los nodos hijos, excluyendo los nodos comentario y los nodos de instrucciones. Esto es una cadena vacía si el nodo no tiene hijos.

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

js

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

Especificaciones

Specification
DOM Standard
# dom-node-textcontent

Compatibilidad con navegadores

BCD tables only load in the browser