APIs del Navegador y DOM

Manipulación del DOM, APIs del navegador y almacenamiento web

Preguntas de Entrevista sobre APIs del Navegador y DOM

Domina las APIs del navegador y técnicas de manipulación del DOM comúnmente preguntadas en entrevistas.

1. Métodos de Manipulación del DOM

// Seleccionar elementos
const el = document.querySelector('.clase');
const els = document.querySelectorAll('div');

// Crear y agregar
const div = document.createElement('div');
div.textContent = 'Hola';
parent.appendChild(div);
parent.append('texto', elemento); // Múltiples items

// Atributos y clases
elemento.setAttribute('data-id', '123');
elemento.classList.add('activo');
elemento.classList.toggle('visible');

// Estilos
elemento.style.color = 'red';
const estilos = window.getComputedStyle(elemento);

2. Manejo de Eventos

// Delegación de eventos
document.addEventListener('click', (e) => {
  if (e.target.matches('.btn')) {
    e.preventDefault();
    e.stopPropagation();
  }
});

// Eventos personalizados
const evento = new CustomEvent('login', {
  detail: { userId: 123 }
});
elemento.dispatchEvent(evento);

3. APIs de Almacenamiento

// LocalStorage
localStorage.setItem('clave', JSON.stringify(datos));
const datos = JSON.parse(localStorage.getItem('clave'));

// SessionStorage
sessionStorage.setItem('token', 'abc');

// Cookies
document.cookie = 'nombre=valor; max-age=3600';

Mejores Prácticas

✓ Usa delegación de eventos para listas dinámicas
✓ Cachea referencias a elementos del DOM
✓ Minimiza reflows y repaints
✓ Usa DocumentFragment para inserciones múltiples
✓ Implementa debounce/throttle para eventos frecuentes