Modificando la visibilidad de elementos HTML

Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

¿Para qué aprender JavaScript?

¿Qué es DOM y Window Object?

Explorando Nodos del DOM

Seleccionando y Accesando a Elementos del DOM

Consultando el DOM con getElementById y querySelector

Navegación efectiva entre nodos

Manipulando Elementos del DOM

Modificando atributos y propiedades

Modificando texto en HTML

Modificando estilos en HTML

Modificando la visibilidad de elementos HTML

Creación de elementos con HTML Strings e insertAdjacentElement()

Agregando elementos con innerHTML e insertAdjacentHTML()

Creación de elementos con createElement()

Remover elementos con remove() y removeChild()

Clonación y reemplazo de elementos con cloneNode y replaceChild

Manipulando Eventos en el DOM

Entendiendo eventos y tipos: Burbuja, Captura y Propagación

Agregar y eliminar escuchadores de eventos o Event Listeners

El objeto evento o eventObject

Manejo de entradas de formulario y validación

Delegación de eventos y prevención de comportamiento predeterminado

Creando un Administrador de Tareas

Añadir tareas desde un formulario

Eliminar y editar tareas del DOM

Almacenamiento y carga de datos en localStorage

Eliminar y editar tareas del almacenamiento local

Inspeccionando y solucionando errores en el código

Personalizando la interfaz del administrador de tareas

Aún hay más por aprender

Asincronía en JavaScript

¿Cómo funciona el JavaScript Engine?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 6

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Daniel Andres Rojas Paredes

hace 2 meses

como el 3 metodo no me funcionaba decidi hacer el segundo, tampoco me funciono, depure css y js , me pace al primer metodo, y dije a ok este si funciono el problema no esta en el js, luego me llego como un rayo que me hizo carcajear, despues de 30 minutos depurando el codigo, mirando si estaba usando mal los selectores o el get element. el porque de este recordatorio que les dejo. ENLACEN SU ARCHIVO CSS A EL HTML¡¡¡¡ JAJAJAJAJ

Natalia Gallego Heras

hace 2 meses

'Toggle' es como se llama en inglés a un interruptor que tiene dos opciones como encendido / apagado, modo claro / modo oscuro... Puede tener este aspecto:![](https://static.platzi.com/media/user_upload/toggle-ba98dd08-2400-4c05-a359-393d5d050e40.jpg)

Alejandro Ramirez

hace 2 meses

• classList: Es una propiedad en JavaScript que proporciona una manera conveniente de acceder y manipular las clases CSS de un elemento HTML. Te permite agregar, quitar, alternar y verificar la presencia de clases en los elementos sin necesidad de manipular directamente la cadena completa de la propiedad "className". METODOS DE classList: • .add : Agrega clases. • .remove: Elimina clases. • .toggle: Alterna la presecia de una clase. • .contains: Verifica si una clase esta presente. • .replace: Remplaza una clase por otra. • .lenght: Devuelve el numero de clases en el elemento. Usar classList es mucho mas limpio y seguro que manipular la propiedad className directamente, ya que evita problemas con la manipulacion de cadenas y garantiza que las clases se gestionen correctamente.

Yuliani Paoleth Alcántara Galindo

hace 2 meses

Yo habia pensado en una solución como esta: *let truly = true;* *function toggle() {* *truly = !truly;* *menu.className = truly === false ? "invisible" : "menu";* *}* Igual funciona y creo que para quien no conoce función flecha y el método toggle a cabalidad está perfecto, ademas profe ya 10 clases y no ha dejado ni un ejercicio, hombre.

Victor R Vele

hace 2 meses

Por favor una idea no me funciona el button visibility pueden ayudarme

Edicson Armando Hurtado Lozano

hace un mes

para que funcione el method hay que inicializar la función. `const button = document.querySelector("button"); const menu = document.querySelector(".menu"); button.addEventListener("click", () => { menu.classList.toggle("invisible"); });`