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
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>
Especificaciones
Specification |
---|
DOM Standard # dom-node-textcontent |
Compatibilidad con navegadores
BCD tables only load in the browser