Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
Una vez que tienes un elemento seleccionado, puedes cambiar lo que muestra con textContent, activar o quitar clases con classList, y ajustar su apariencia directamente con style.
Explicación
Una vez que tienes un elemento seleccionado, puedes cambiar lo que muestra y cómo se ve:
elemento.textContent = "texto"Reemplaza todo el texto dentro del elemento por el valor que le asignes.
elemento.classList.toggle("clase")Agrega la clase si no la tiene, o la quita si ya la tiene. Es útil para activar o desactivar un estado con un solo método.
elemento.classList.contains("clase")Devuelve true o false según si el elemento tiene esa clase en este momento.
elemento.style.propiedad = "valor"Cambia una propiedad CSS directamente desde JavaScript. El nombre se escribe en camelCase (backgroundColor en vez de background-color).
Reto rápido
Cambia el texto de mensaje.textContent para el estado activo e inactivo, y personaliza el color en boton.style.backgroundColor.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Siempre que puedas, cambia el estilo agregando o quitando una clase CSS con classList en vez de escribir estilos sueltos con .style: así mantienes el diseño en el CSS y el JavaScript solo decide cuándo aplicarlo.
Dato extra
classList también tiene .add("clase") para agregar siempre y .remove("clase") para quitar siempre, por si no quieres el comportamiento de alternar de toggle.
Error común
Usar innerHTML cuando solo necesitas cambiar texto plano: elemento.innerHTML = texto interpreta el contenido como HTML (más lento y riesgoso si el texto viene de un usuario), mientras que textContent siempre lo trata como texto simple y seguro.
Siguiente paso
Ya sabes cambiar el contenido y el estilo de un elemento que ya existe en la página. Ahora veamos cómo crear elementos completamente nuevos y eliminar los que ya no necesitas.
Ir a la siguiente lección