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:
- Si el nodo es un documento, un DOCTYPE, o una notation,
textContent
devuelvenull
. (Para obtener todo el texto y los datos de CDATA data del documento completo, uno podr铆a usardocument.documentElement.textContent
.) - Si el nodo es una secci贸n CDATA, un comentario, una instrucci贸n de procesamiento, o un nodo de texto,
textContent
devuelve el texto dentro del nodo, por ejemplo, elNode.nodeValue
. - Para otros tipos de nodos,
textContent
retorna la concatenaci贸n del atributotextContent
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>
y<style>
,innerText
, no. innerText
tambi茅n tiene en cuenta el estilo y no retornar谩 el texto de elementos escondidos, mientras quetextContent
s铆 lo har谩.- Como
innerText
tiene en cuenta el estilo CSS, escribirlo disparar谩 un reflow, mientras quetextContent
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
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 |