JavaScript in the Browser: DOM, Events & APIs
Master how JavaScript interacts with web pages — selecting elements, responding to user actions, and fetching live data from APIs. By the end, you will build a fully interactive single-page app that reads, updates, and reacts to the DOM in real time.
Course Content
6 modules · 30 lessonsUnderstanding the DOM
Select, traverse, and read any element on a web page using the DOM API.
What is the DOM and how does a browser build it
DOM definition, document object, node tree, element nodes, text nodes, browser parsing
How to select DOM elements with querySelector
querySelector, querySelectorAll, getElementById, CSS selector syntax, null returns, NodeList vs HTMLCollection
Reading and writing element properties in the DOM
textContent, innerHTML, innerText, value, setAttribute, getAttribute, dataset, classList
How to traverse the DOM tree with parent, child, and sibling properties
parentElement, children, firstElementChild, lastElementChild, nextElementSibling, previousElementSibling, closest
Creating and inserting DOM elements dynamically with JavaScript
createElement, appendChild, append, prepend, insertAdjacentElement, removeChild, remove, cloneNode, DocumentFragment
Events and Event Handling
Attach, delegate, and remove event listeners to build interactive, responsive interfaces.
How addEventListener works in JavaScript
addEventListener syntax, event types, callback function, event object, removeEventListener, once option
What is event bubbling and how does it work
event bubbling, event capturing, propagation phases, stopPropagation, target vs currentTarget
Event delegation: handling clicks on dynamic elements
event delegation pattern, e.target, matches method, dynamic children, performance benefits
Preventing default browser behaviour on form submit and links
preventDefault, form submit event, anchor default navigation, input validation, submit vs click
Keyboard and input events: keydown, keyup, and input
keydown event, keyup event, input event, e.key, e.code, e.repeat, compositionstart, debouncing input
Styles, Classes, and Layout via JavaScript
Toggle styles and classes programmatically, read element dimensions, and animate UI state transitions.
How to add, remove, and toggle CSS classes with classList
classList API, add, remove, toggle, contains, replace, multiple classes, CSS state management
Reading and setting inline styles with element.style
element.style object, camelCase properties, getComputedStyle, CSS custom properties, style.cssText, when to use inline styles
How to read element dimensions and position in the browser
getBoundingClientRect, offsetWidth, offsetHeight, scrollTop, scrollLeft, clientHeight, innerWidth, viewport coordinates
CSS transitions vs JavaScript animation: requestAnimationFrame
CSS transition, requestAnimationFrame, animation loop, cancelAnimationFrame, performance, reflow avoidance
Intersection Observer: detecting when elements enter the viewport
IntersectionObserver API, threshold, rootMargin, isIntersecting, lazy loading pattern, infinite scroll, disconnect
Asynchronous JavaScript and the Fetch API
Write non-blocking code using Promises and async/await, and consume live REST APIs with the Fetch API.
What is asynchronous JavaScript and why does it matter
synchronous vs asynchronous, call stack, Web APIs, callback queue, event loop, non-blocking IO
JavaScript Promises: then, catch, and Promise.all
Promise constructor, resolve, reject, then, catch, finally, Promise.all, Promise.allSettled, chaining, error propagation
async/await: writing asynchronous code that reads like synchronous
async function, await keyword, try/catch with async, error handling, async IIFE, top-level await, return values
How to fetch data from an API using the Fetch API
fetch function, Request, Response object, response.ok, response.json, response.text, HTTP methods, Content-Type header
Handling API errors and loading states in the UI
loading state pattern, error state, AbortController, fetch timeout, retry logic, user feedback, finally block
Browser Storage and State Management
Persist and sync application data across sessions using localStorage, sessionStorage, and cookies.
localStorage vs sessionStorage: when to use each
localStorage API, sessionStorage API, setItem, getItem, removeItem, clear, storage limits, persistence rules
How to read and write browser cookies with JavaScript
document.cookie, cookie syntax, expires, max-age, path, Secure flag, HttpOnly, SameSite, reading cookies, deleting cookies
The storage event: syncing data across browser tabs
storage event, cross-tab communication, event.key, event.newValue, event.oldValue, event.storageArea, BroadcastChannel API
Building a simple client-side state manager with localStorage
state management pattern, getState, setState, subscribers, pub-sub, localStorage sync, JSON serialization
IndexedDB basics: storing structured data in the browser
IndexedDB overview, database, object store, transaction, IDBRequest, onsuccess, onerror, add, get, getAll
Web APIs: History, URL, Clipboard, and Observers
Use built-in browser APIs to manage navigation, parse URLs, access the clipboard, and observe DOM mutations.
How the History API enables single-page app navigation
history.pushState, history.replaceState, popstate event, window.location, URL state management, SPA routing basics
Parsing and building URLs with the URL API
URL constructor, searchParams, URLSearchParams, get, set, append, delete, has, toString, URL manipulation
Clipboard API: reading and writing text in the browser
navigator.clipboard.writeText, readText, clipboard permissions, async clipboard, fallback execCommand, copy event, paste event
MutationObserver: watching DOM changes without polling
MutationObserver API, observe, disconnect, MutationRecord, childList, attributes, subtree, characterData
ResizeObserver: reacting to element size changes
ResizeObserver API, contentRect, observe, unobserve, disconnect, responsive components, element queries