Node.textContent

Sumario

La propiedad textContent establece o devuelve el contenido de texto del nodo especificado. Al devolver, también devuelve el contenido de texto de todos sus descendientes.

Sintaxis

var texto = elemento.textContent;
elemento.textContent = "esto es un texto de ejemplo";

Descripcion

• textContent retorna null si el elemento es un documento, un tipo de documento, o una notación. Para coger todo el texto y datos CDATA del documento entero, se puede usar document.documentElement.textContent.
• Si el nodo es una sección CDATA, un comentario, una instrucción, o un nodo de texto, textContent retorna el texto dentro de este nodo (el 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.
• Escribir esta propiedad 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

Especificación