CheatSheet (JS DOM)

Creadas @20 de marzo de 2025 8:43

Asignatura LENGUAJE DE MARCAS

Aquí está la cheatsheet completada con secciones adicionales y detalles

importantes:

# Cheat Sheet: Manipulación del DOM con JavaScript

## Seleccionar Elementos

### Métodos de Selección

```js
// Seleccionar por ID (retorna un solo elemento)
let elemento = document.getElementById("miID");

// Seleccionar por clase (retorna HTMLCollection viva)

let elementos = document.getElementsByClassName("miClase");

// Seleccionar por etiqueta (retorna HTMLCollection viva)

let elementos = document.getElementsByTagName("div");

// Seleccionar con CSS (retorna NodeList estática)

let elemento = document.querySelector(".selectorCSS");
let elementos = document.querySelectorAll("div.miClase");

Manipulación de Elementos
Cambiar Contenido

elemento.textContent = "Texto seguro (escapa HTML)";

elemento.innerText = "Texto visible (considera estilos)";

CheatSheet (JS DOM) 1

 elemento.innerHTML = "HTML renderizado <b>!</b>"; // ¡Riesgo XSS!

Modificar Atributos

// Métodos genéricos
elemento.setAttribute("data-id", "123");
let valor = elemento.getAttribute("title");
elemento.removeAttribute("alt");

// Propiedades directas (más eficientes)

input.value = "nuevo";
img.src = "imagen.jpg";
checkbox.checked = true;
a.href = "#nuevo";

Modificar Clases

// Métodos modernos (classList)

elemento.classList.add("clase1", "clase2");
elemento.classList.replace("vieja", "nueva");
elemento.classList.toggle("activo", forceState); // forceState opcional

// classList vs className (evitar sobrescribir)

elemento.className = "nueva-clase"; // Reemplaza todas las clases

Estilos en Línea

// CamelCase para propiedades compuestas

elemento.style.backgroundColor = "#f00";
elemento.style.setProperty("font-size", "2rem"); // Alternativa

// Resetear estilos
elemento.style.removeProperty("color");

Crear y Eliminar Elementos

CheatSheet (JS DOM) 2

 Crear Elementos

// Desde cero
const nuevoDiv = document.createElement("div");

// Clonar elementos (deep=true incluye hijos)

const clone = elementoExistente.cloneNode(true);

Insertar Elementos

// Métodos modernos (múltiples elementos)

padre.append(nuevoDiv, "Texto"); // Al final
padre.prepend(primerHijo); // Al inicio

// Posiciones específicas
elemento.insertAdjacentHTML("beforeend", "<span>Hola</span>");
/* Opciones:
- beforebegin (hermano anterior)
- afterbegin (primer hijo)
- beforeend (último hijo)
- afterend (hermano siguiente)
*/

Eliminar Elementos

// Método moderno (no necesita padre)

elemento.remove();

// Alternativa tradicional
padre.removeChild(elemento);

Eventos en el DOM
Manejo de Eventos

// Buenas prácticas (usar addEventListener)

const handler = () => console.log("Click");

CheatSheet (JS DOM) 3

 btn.addEventListener("click", handler);

// Objeto Event
elemento.addEventListener("click", (e) => {
e.preventDefault(); // Evitar comportamiento default
e.stopPropagation(); // Detener burbujeo
console.log(e.target); // Elemento origen
});

Delegación de Eventos

// Manejar eventos en elementos dinámicos

lista.addEventListener("click", (e) => {
if(e.target.matches("li.item")) {
console.log("Item clickeado:", e.target);
}
});

Eventos Comunes

// Formularios
form.addEventListener("submit", manejarEnvio);
input.addEventListener("input", validarCampo);

// Ventana
window.addEventListener("resize", ajustarLayout);
window.addEventListener("load", init); // Espera todos los recursos

Traversing (Navegación en el DOM)

Relaciones entre Nodos

// Jerarquía
elemento.parentElement;
elemento.children; // Solo elementos hijos
elemento.childNodes; // Incluye nodos de texto

CheatSheet (JS DOM) 4

 // Hermanos
elemento.previousElementSibling;
elemento.nextElementSibling;
elemento.closest(".selector"); // Ancestro más cercano

Trabajar con Datos

Dataset (Atributos data-*)

<div id="user" data-user-id="42" data-role="admin"></div>

const user = document.getElementById("user");

console.log(user.dataset.userId); // "42"
user.dataset.status = "active"; // Crea data-status

Almacenamiento Temporal

// Asignar datos a elementos

elemento._customData = { valor: 123 };

// Mejor práctica: usar WeakMap

const privateData = new WeakMap();
privateData.set(elemento, { clave: 'secreta' });

Rendimiento
Buenas Prácticas

// Fragmentos para múltiples inserciones

const fragment = document.createDocumentFragment();
items.forEach(item => fragment.append(crearElemento(item)));
lista.append(fragment);

// Evitar reflows excesivos

// (Agrupar cambios de estilo/geometría)

CheatSheet (JS DOM) 5

 Observar Cambios

// MutationObserver
const observer = new MutationObserver((mutations) => {
mutations.forEach(m => console.log("Cambio detectado:", m));
});
observer.observe(elemento, {
attributes: true,
childList: true
});

Utilidades Avanzadas
CSS y Animaciones

// Detectar transiciones
elemento.addEventListener("transitionend", () => {
console.log("Transición completada");
});

// Forzar repintado (útil para animaciones)

elemento.offsetHeight; // Truco para reiniciar flujo

IntersectionObserver

// Detectar visibilidad
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add("visible");
}
});
});
observer.observe(elemento);

Inicialización

CheatSheet (JS DOM) 6

 // Contenido cargado (no espera imágenes)
document.addEventListener("DOMContentLoaded", init);

// Contenido y recursos cargados

window.onload = init;

Polyfills y Fallbacks

// Verificar soporte de métodos

if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector;
}

Esta versión incluye:

- Diferencias entre métodos de selección (HTMLCollection vs NodeList)
- Mejores prácticas de rendimiento (fragmentos, reflows)
- Métodos modernos (append/prepend, dataset, etc.)
- Técnicas avanzadas (Observers, delegación de eventos)
- Consideraciones de seguridad (XSS con innerHTML)
- Polyfills y compatibilidad
- Manejo de datos (dataset, WeakMap)

Aquí tienes una lista completa de eventos comunes del DOM con ejemplos y
ejercicios prácticos:

Lista de Eventos Comunes

1. Eventos del Mouse
click - Clic simple

dblclick - Doble clic

mouseover - Mouse entra en el elemento

mouseout - Mouse sale del elemento

CheatSheet (JS DOM) 7

 mousemove - Mouse se mueve sobre el elemento

mousedown - Botón del mouse presionado

mouseup - Botón del mouse liberado

2. Eventos del Teclado

keydown - Tecla presionada

keyup - Tecla liberada

keypress - Tecla presionada y liberada (obsoleto)

3. Eventos de Formularios
submit - Formulario enviado

input - Valor de input cambiado

change - Valor modificado y confirmado (ej: select)

focus - Elemento enfocado

blur - Elemento pierde el foco

4. Eventos de Ventana
load - Página y recursos cargados

resize - Ventana redimensionada

scroll - Scroll realizado

5. Eventos Touch
touchstart - Toque iniciado

touchend - Toque finalizado

touchmove - Dedo movido en pantalla

6. Eventos de Drag and Drop

dragstart - Arrastre iniciado

dragend - Arrastre finalizado

dragover - Elemento arrastrado sobre área

7. Eventos de Medios

CheatSheet (JS DOM) 8

 play - Medios iniciados

pause - Medios pausados

ended - Reproducción finalizada

Ejemplos Prácticos
1. Click Básico

const boton = document.querySelector("#miBoton");

boton.addEventListener("click", () => {
console.log("¡Botón clickeado!");
});

2. Validación de Formulario

const formulario = document.querySelector("#miForm");

formulario.addEventListener("submit", (e) => {
e.preventDefault();
if (validarCampos()) {
formulario.submit();
}
});

3. Movimiento con Teclado

document.addEventListener("keydown", (e) => {

const jugador = document.querySelector("#jugador");
switch(e.key) {
case "ArrowLeft":
jugador.style.left = `${jugador.offsetLeft - 10}px`;
break;
case "ArrowRight":
jugador.style.left = `${jugador.offsetLeft + 10}px`;
break;

CheatSheet (JS DOM) 9

 }
});

4. Efecto Hover

const tarjeta = document.querySelector(".tarjeta");

tarjeta.addEventListener("mouseover", () => {
tarjeta.style.transform = "scale(1.05)";
});
tarjeta.addEventListener("mouseout", () => {
tarjeta.style.transform = "scale(1)";
});

5. Scroll Infinito

window.addEventListener("scroll", () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeigh
t) {
cargarMasContenido();
}
});

Consejos para Practicar

1. Debugging: Usa console.log(event) para entender los detalles del evento

2. Delegación de Eventos: Usa event.target para manejar elementos dinámicos

3. Optimización: Remueve listeners innecesarios con removeEventListener

4. Mobile First: Prueba siempre eventos táctiles en dispositivos reales

// Ejemplo de delegación de eventos

document.querySelector("#lista").addEventListener("click", (e) => {
if (e.target.matches("li")) {
e.target.classList.toggle("seleccionado");
}
});

CheatSheet (JS DOM) 10

 Dominar estos eventos te permitirá crear aplicaciones web altamente
interactivas y responsivas. ¡Practica combinando múltiples eventos en un
mismo proyecto!

CheatSheet (JS DOM) 11