Modificar texto en HTML con JavaScript

Clase 7 de 27 • Curso de JavaScript: Manipulación del DOM

Resumen

¿Cómo modificar dinámicamente el texto de un elemento HTML?

Modificar el texto de un elemento HTML de manera dinámica es una habilidad esencial para cualquier desarrollador web. Este conocimiento te permite cambiar el contenido de una página web en respuesta a interacciones del usuario, mejorando significativamente la experiencia del usuario. A continuación, exploraremos cómo lograr esta modificación utilizando la consola del navegador y JavaScript.

¿Cómo seleccionar un elemento en el DOM?

Para modificar un texto, lo primero es seleccionar el elemento en el DOM que contiene ese texto. En nuestro ejemplo, trabajamos con un elemento H1, el cual queremos modificar:

Abrir la consola del navegador: Con el documento HTML cargado en el navegador, abre la consola del desarrollador (generalmente con la tecla F12 o Ctrl+Shift+I).
Guardar el elemento en una constante: Utilizamos document.querySelector para seleccionar el elemento y almacenarlo en una constante.
```
const titulo = document.querySelector('#title');
```
Aquí, #title denota un elemento con el ID title. Es importante usar el símbolo # para los IDs.

¿Cómo visualizar las propiedades de un nodo?

Una vez que hemos seleccionado el elemento, podemos explorar sus propiedades utilizando console.dir() para acceder a su representación en el DOM.

console.dir(titulo);

Esto nos permite visualizar varias propiedades del elemento, incluyendo textContent, que contiene el texto del nodo.

¿Cómo modificar el texto de un elemento?

A partir de este punto, podemos proceder a modificar directamente el contenido del texto utilizando dos métodos principales:

Usar textContent: Este método actualiza el contenido de texto dentro del nodo.
```
titulo.textContent = "Nuevo texto";
```
Tras ejecutar este código, el texto visible del elemento H1 cambiará a "Nuevo texto".
Usar innerText: Aunque similar a textContent, innerText también respeta los estilos CSS (como display: none) y puede ser más lento en rendimiento.
```
titulo.innerText = "Este es otro título";
```
Al usar innerText, el contenido se modifica de manera similar a textContent.

¿Cuál es la diferencia entre `textContent` e `innerText`?

Ambos métodos cambian el texto de un elemento, pero tienen ciertas diferencias clave:

textContent: Proporciona acceso al contenido textual completo del elemento y sus descendientes. Vuelve al actualizador de tiempos rápidos y es más eficiente, especialmente cuando el CSS no debe ser considerado.
innerText: Considera el estilo CSS al definir los valores de texto visibles. Es útil cuando deseas tener en cuenta las reglas de estilo de CSS en la interfaz de usuario.

Recomendaciones prácticas

Selecciona el método adecuado: Prefiere textContent para cambios de texto simples y innerText si necesitas que los estilos CSS impacten en la evaluación del contenido visual.
Prueba la eficiencia: Intenta experimentos con ambos métodos para entender mejor su contribución en diferentes situaciones en tu propio código.
Mantén el código limpio: Almacena los elementos en constantes o variables bien nombradas para un código más legible y mantenible.

Aplicar estos métodos no solo mejora tu comprensión del DOM sino que también te capacita para crear interfaces interactivas más atractivas y dinámicas. ¡Sigue explorando y fortaleciendo tus habilidades de desarrollo web!