The Browser — Cheat Sheet

The DOM — Selecting and Changing the Page

document.querySelector('.card')            // first match, or null
document.querySelectorAll('.card')         // static NodeList of all matches
document.getElementById('root')            // fastest, id only

// querySelectorAll returns a static list — not live
const items = document.querySelectorAll('li')   // snapshot
// getElementsByClassName returns a LIVE collection that updates itself,
// which causes infinite loops if you append inside a loop over it

// NodeList has forEach but not map; convert when you need array methods
[...document.querySelectorAll('li')].map(li => li.textContent)

// Searching within an element, not the whole document
card.querySelector('.title')

Events — Bubbling, Delegation and Cleanup

// document -> ... -> parent -> TARGET -> parent -> ... -> document
//         capture phase            |         bubble phase

parent.addEventListener('click', h)              // bubble (default)
parent.addEventListener('click', h, true)        // capture
parent.addEventListener('click', h, { capture: true, once: true })

// e.target  — where it actually happened
// e.currentTarget — where this listener is attached

parent.addEventListener('click', e => {
  e.target        // the button that was clicked
  e.currentTarget // parent
})

e.stopPropagation()   // stop travelling further
e.preventDefault()    // cancel the default action; does NOT stop bubbling

Forms — Inputs, Validation and Submission

form.addEventListener('submit', async (e) => {
  e.preventDefault()                     // stop the page navigating

  const data = new FormData(form)
  data.get('email')                      // by name attribute
  Object.fromEntries(data)               // plain object, for JSON APIs

  await fetch('/api/signup', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(Object.fromEntries(data)),
  })
})

// Sending files: pass the FormData directly, no Content-Type header
await fetch('/api/upload', { method: 'POST', body: new FormData(form) })

// Checkboxes and multi-selects need getAll
data.getAll('topics')     // ['arrays', 'graphs']

Browser Storage — localStorage, Cookies and IndexedDB

localStorage.setItem('theme', 'dark')
localStorage.getItem('theme')          // 'dark', or null
localStorage.removeItem('theme')

// Objects must be serialised
localStorage.setItem('user', JSON.stringify(user))
const user = JSON.parse(localStorage.getItem('user') ?? 'null')

// It can throw — private mode, quota full, storage blocked
function safeSet(key, value) {
  try { localStorage.setItem(key, JSON.stringify(value)) }
  catch { /* quota or blocked — carry on without persisting */ }
}

// sessionStorage: identical API, cleared when the tab closes,
// and not shared between tabs even on the same site.

// Cross-tab sync comes free with the storage event:
window.addEventListener('storage', e => {
  if (e.key === 'theme') applyTheme(e.newValue)   // fires in OTHER tabs
})

History & URLs — Client-Side Routing Underneath

// Change the URL without a request
history.pushState({ page: 2 }, '', '/problems?page=2')
history.replaceState({}, '', '/problems')     // no new history entry

// The user pressed back or forward
window.addEventListener('popstate', (e) => {
  render(e.state)        // whatever you passed to pushState
})

// pushState does NOT fire popstate — render yourself after calling it
function navigate(url, state) {
  history.pushState(state, '', url)
  render(state)
}

// The refresh problem: /problems/two-sum has no file on the server.
// The server must return index.html for unknown paths, or a refresh 404s.
// (Vercel and Next handle this; a bare nginx config does not.)

Observers — Intersection, Resize and Mutation

const observer = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) loadNextPage()
    }
  },
  { rootMargin: '200px' },      // fire 200px early, so it feels instant
)

observer.observe(sentinelElement)     // an empty div after the last row
observer.disconnect()                 // cleanup

// Lazy images need no JavaScript at all:
<img src="thumb.jpg" loading="lazy" />

// The old way, for comparison — runs on every scroll event
// and forces layout each time:
window.addEventListener('scroll', () => {
  if (el.getBoundingClientRect().top < innerHeight) load()
})

Useful Browser APIs

// Clipboard — requires a user gesture and a secure context
await navigator.clipboard.writeText(code)
const text = await navigator.clipboard.readText()   // needs permission

// Crypto — proper random, no library needed
crypto.randomUUID()                    // 'a3f8...' RFC 4122 v4
crypto.getRandomValues(new Uint8Array(16))

// Media queries from JavaScript, including live changes
const dark = window.matchMedia('(prefers-color-scheme: dark)')
dark.matches                           // boolean now
dark.addEventListener('change', e => applyTheme(e.matches))

const reduced = window.matchMedia('(prefers-reduced-motion: reduce)')
if (!reduced.matches) animate()

How the Browser Renders — and Why Your Page Janks

// Style -> Layout -> Paint -> Composite

// Changes LAYOUT (all four stages) — expensive
width, height, top, left, margin, padding, font-size, display

// Changes PAINT only (skips layout)
color, background-color, box-shadow, border-radius, visibility

// COMPOSITE only (GPU, skips layout and paint) — cheapest
transform, opacity

// So this janks:
el.style.left = x + 'px'

// And this does not:
el.style.transform = `translateX(${x}px)`

// Hint to the browser before an animation starts:
.card { will-change: transform }   // use sparingly; it costs memory