Ejemplos de JavaScript (Vanilla)

#	Descripción	Categoría	Código JavaScript	Instrucción	Ejemplo (Demo)
01	Cambiar color de texto	DOM	`document.getElementById('titulo').style.color = '#e53935';`	Selecciona el elemento por ID y cambia su color directamente en el objeto style.	¡Hola JS!
02	Ocultar / Mostrar elemento	DOM	`el.style.display = 'none'; el.style.display = 'block';`	Oculta o muestra el elemento modificando su propiedad display de CSS.
03	Cambiar texto de un elemento	DOM	`document.getElementById('msg').textContent = '¡Cambiado!';`	Reemplaza el contenido de texto del elemento usando textContent.	Texto original
04	Agregar / quitar clase CSS	DOM	`el.classList.add('activo'); el.classList.remove('activo');`	Añade o elimina una clase específica usando la API classList.	Elemento
05	Insertar elemento al final	DOM	`lista.insertAdjacentHTML('beforeend', '<li>Item</li>');`	Inserta HTML nuevo justo dentro del elemento, después de su último hijo.	• Item 1 • Item 2
06	Cambiar atributo HTML	DOM	`el.setAttribute('href', 'https://js.org');`	Modifica el valor de un atributo HTML usando setAttribute().	Ver enlace
07	Evento clic	Eventos	`btn.addEventListener('click', () => { // acción });`	Asigna una función al evento clic usando addEventListener().	0
08	Eventos hover	Eventos	`caja.addEventListener('mouseenter', fn); caja.addEventListener('mouseleave', fn);`	Detecta cuándo el cursor entra o sale del elemento.	Pasa el cursor
09	Leer valor de input	Eventos	`campo.addEventListener('input', (e) => { let valor = e.target.value; });`	Lee el valor del input en tiempo real mediante e.target.value.
10	Detectar tecla Enter	Eventos	`campo.addEventListener('keypress', (e) => { if (e.key === 'Enter') { ... } });`	Verifica si la tecla presionada corresponde a "Enter".	¡Enter!
11	Fade out / Fade in (CSS + JS)	Efectos	`caja.style.opacity = '0'; caja.style.opacity = '1';`	Modifica la opacidad aprovechando la propiedad transition de CSS.
12	Slide up / Slide down	Efectos	`panel.style.maxHeight = '0px'; panel.style.maxHeight = '50px';`	Oculta o muestra el panel animando su altura máxima.	Panel deslizable
13	Animación CSS con JS	Efectos	`barra.style.width = '80%';`	Cambia el ancho permitiendo que CSS se encargue de la transición suave.
14	Petición AJAX con fetch()	AJAX	`fetch('/api').then(r => r.json()) .then(data => console.log(data));`	Realiza una petición asíncrona moderna usando la API fetch.	Esperando petición...
15	Iterar array con forEach()	Utilidades	`frutas.forEach((valor) => { lista.innerHTML += '<li>' + valor + '</li>'; });`	Recorre un arreglo nativamente con forEach.