Node.textContent

Sumario

Lee o escribe el contenido textual de un nodo y 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">This is <span>some</span> text</div>

// Lee el contenido textual:
var text = document.getElementById("divA").textContent;
// |text| es modificado a "This is some text".

// Escribe el contenido textual:
document.getElementById("divA").textContent = "This is some text";
// El HTML de divA ahora es:
//   <div id="divA">This is some text</div>

Compatibilidad con navegadores

Especificación

• textContent