JavaScript textContent | Explicado

En este artículo vamos a explorar el uso de la propiedad textContent en JavaScript. textContent devuelve el texto contenido en un elemento, excluyendo cualquier etiqueta HTML presente. Aprenderemos cómo utilizar textContent en combinación con otros métodos para manipular el contenido de un sitio web de manera dinámica.

¿Qué es textContent?

La propiedad textContent devuelve el texto contenido en un elemento HTML. Este texto no incluirá ninguna etiqueta HTML presente en el elemento.

La propiedad es compatible con todos los navegadores modernos y está incluida en el estándar DOM (Document Object Model) de JavaScript.

¿Cómo usar textContent?

Obtener el contenido de un elemento

Para obtener el contenido de un elemento HTML, simplemente podemos acceder a la propiedad textContent del elemento utilizando una referencia del DOM. Esto nos devolverá una cadena de texto con el contenido del elemento, sin etiquetas HTML.

const contenido = document.getElementById('mi-elemento').textContent;

Actualizar el contenido de un elemento

Podemos utilizar textContent para actualizar el contenido de un elemento HTML, reemplazando el texto actual por uno nuevo.

document.getElementById('mi-elemento').textContent = 'Nuevo contenido';

Combinando textContent con otros métodos

Podemos combinar textContent con otros métodos disponibles en el DOM para manipular elementos HTML de manera más avanzada.

• innerHTML: devuelve todo el contenido del elemento, incluyendo cualquier etiqueta HTML presente
• setAttribute: establece el valor de un atributo de un elemento HTML
• classList: devuelve una colección de las clases CSS del elemento

Ejemplos de uso

Veamos un ejemplo de cómo podemos utilizar textContent junto con un evento de clic de botón para actualizar el contenido de un elemento HTML:


const miBoton = document.getElementById('mi-boton');
const miElemento = document.getElementById('mi-elemento');

miBoton.addEventListener('click', () => {
miElemento.textContent = 'Nuevo contenido';
});


Conclusión

La propiedad textContent es una herramienta útil para trabajar con el contenido de sitios web de manera dinámica. Utilizando textContent en combinación con otros métodos de manipulación DOM, podemos crear experiencias de usuario más avanzadas en nuestros sitios web.

¡Experimenta y diviértete utilizando textContent para crear interacciones dinámicas en tu sitio web!

Preguntas frecuentes

¿textContent es compatible con todos los navegadores?

Sí, textContent es compatible con todos los navegadores modernos y está incluido en el estándar DOM de JavaScript.

¿Qué diferencia hay entre textContent e innerHTML?

textContent devuelve el texto contenido en un elemento, excluyendo cualquier etiqueta HTML presente. innerHTML devuelve todo el contenido presente en el elemento, incluyendo cualquier etiqueta HTML presente.

¿Puedo utilizar textContent para modificar el valor de un atributo HTML?

No, textContent solo funciona para modificar el contenido de un elemento HTML. Para modificar el valor de un atributo HTML, debes utilizar el método setAttribute del DOM.

¿Puedo utilizar textContent para obtener el valor de un atributo HTML?

No, textContent solo funciona para obtener el contenido de un elemento HTML. Para obtener el valor de un atributo HTML, debes utilizar el método getAttribute del DOM.

Callbacks y Promises | Explicado con ejemplos

Cómo elevar al cuadrado un número en JavaScript

Cómo obtener valores únicos de una matriz en JavaScript

Cómo hacer que el navegador navegue a una URL en JavaScript

Cómo eliminar elementos de un array en JavaScript

Cómo comprobar si una cadena es un número en JavaScript

Cómo dar formato a un número en JavaScript

Cómo imprimir en la Consola en JavaScript

Cómo utilizar exponentes en JavaScript