Browser & DOM APIs

// Selecting elements
const el = document.querySelector('.class');
const els = document.querySelectorAll('div');

// Creating & appending
const div = document.createElement('div');
div.textContent = 'Hello';
parent.appendChild(div);
parent.append('text', element); // Multiple items

// Attributes & classes
element.setAttribute('data-id', '123');
element.classList.add('active');
element.classList.toggle('visible');

// Styles
element.style.color = 'red';
const styles = window.getComputedStyle(element);

// Event delegation
document.addEventListener('click', (e) => {
  if (e.target.matches('.btn')) {
    e.preventDefault();
    e.stopPropagation();
  }
});

// Custom events
const event = new CustomEvent('login', {
  detail: { userId: 123 }
});
element.dispatchEvent(event);

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

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

// Cookies
document.cookie = 'name=value; max-age=3600';

// Fetch
async function fetchData() {
  const res = await fetch('/api/data');
  return await res.json();
}

// Intersection Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
    }
  });
});
observer.observe(element);