Atributo textContent del elemento HTML DOM

Definición y uso

textContent Atributo que establece o devuelve el contenido de texto de un nodo específico, así como de todos sus descendientes.

Si ha configurado textContent Atributo, que eliminará todos los nodos hijos y será reemplazado por un solo nodo de texto que contiene la cadena dada.

Consejo:A veces, este atributo se puede usar para reemplazar el atributo nodeValue, pero recuerde que este atributo también regresará el texto de todos los nodos hijos.

Vea también:

Atributo innerText

Atributo innerHTML

Ejemplo

Ejemplo 1

Devolver el contenido de texto del elemento:

let text = element.textContent;

Prueba personalmente

Ejemplo 2

Cambiar el contenido de texto del elemento <p> con id="demo":

element.textContent = "I have changed!";

Prueba personalmente

Ejemplo 3

Obtener todo el contenido de texto del elemento <ul> con id="myList":

let text = document.getElementById("myList").textContent;

Prueba personalmente

Sintaxis

Devolver el contenido de texto del nodo：

elemento.textContent

o

nodo.textContent

Establecer el contenido de texto del nodo：

elemento.textContent = text
nodo.textContent = text

Valor del atributo

Valor Descripción
text El contenido de texto de un elemento o nodo.

Valor de retorno

Tipo Descripción
Cadena

El contenido de texto de los elementos y todos sus descendientes.

Si el elemento es document, document type o notation, devuelve null.

Diferencias entre innerHTML, innerText y textContent

La propiedad innerText devuelve：

Sólo devuelve el contenido de texto de los elementos y todos sus descendientes, sin espacio en blanco oculto CSS y etiquetas, excepto los elementos <script> y <style>.

La propiedad innerHTML devuelve：

El contenido de texto del elemento, incluyendo todos los espacios en blanco y las etiquetas HTML internas.

La propiedad textContent devuelve：

El contenido de texto de los elementos y todos sus descendientes, con espacios en blanco y texto oculto CSS, pero sin etiquetas.

Ejemplo HTML

<p id="myP">   Este elemento tiene espacio adicional     y contiene <span>un elemento span</span>.</p>

Ejemplos de JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Prueba personalmente

En el ejemplo anterior：

La propiedad innerText devuelve：

Este elemento tiene espacio adicional y contiene un elemento span.

La propiedad innerHTML devuelve：

   Este elemento tiene espacio adicional y contiene <span>un elemento span</span>.

La propiedad textContent devuelve：

   Este elemento tiene espacio adicional y contiene un elemento span.

浏览器支持

element.textContent 是 DOM Level 3 (2004) 特性。

所有浏览器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte