Web Platform interview questions – HTML, CSS, JavaScript & browser APIs

querySelector returns only the first element matching the CSS selector (in document order), or null if there are no matches. To get all matches use querySelectorAll, which returns a static NodeList.

event.target is the element where the event originated (the clicked <li> or something inside it). event.currentTarget (and this) is the element the listener is bound to — the <ul>. Delegation typically reads event.target and walks up with closest() to find the intended item.

fetch only rejects on network failures (DNS error, offline, aborted, CORS block). Any completed HTTP response — including 404 or 500 — resolves the promise. You must check response.ok (or response.status) yourself and throw to treat error statuses as failures.

Web Storage stores only strings. The number 42 is coerced to the string "42" on write, and getItem returns a string (or null for a missing key). Serialize structured data with JSON.stringify on write and JSON.parse on read.

A Web Worker runs script on a background thread, so long computations don't block the UI. It has no access to the DOM, window, or document; it communicates with the page only via postMessage and the message event, and data is copied (structured clone) or transferred.

A PUT with Content-Type: application/json is not a CORS "simple request", so the browser sends an automatic OPTIONS preflight first. The server must answer with Access-Control-Allow-Origin, -Allow-Methods, and -Allow-Headers permitting the call before the browser will send the actual PUT.

The native loading="lazy" attribute on <img> (and <iframe>) lets the browser postpone fetching the resource until it nears the viewport, saving bandwidth and speeding up initial load. async/defer apply to <script>, not images.

XSS is injecting attacker-controlled script into a page. Treating input as text (textContent), escaping output for its context, and a strict CSP all cut off injection or execution. Moving the token to localStorage does the opposite — it makes the token readable by any injected script, so it worsens XSS impact.

The first rule of ARIA is to use native semantics where possible; aria-label supplies an accessible name; aria-hidden="true" hides a node from assistive tech. ARIA only changes semantics — it adds no behavior, so keyboard handling (focus, Enter/Space, arrow keys) must still be implemented in JavaScript.

Cross-site request forgery abuses ambient authority: the browser automatically attaches the target site's cookies to any request to that origin, so a forged request from a malicious page can act as the logged-in user. Defenses include anti-CSRF tokens and SameSite cookies, which break this automatic credential attachment for cross-site requests.

An event runs in three phases: capture (root → target), target, then bubble (target → root). The parent's capturing listener (third arg true) fires first on the way down, then the listener on the clicked target #child, then the parent's default (bubbling) listener on the way back up.

Each call clears the previous pending timer and schedules a new one, so the first two never fire. Only the timer from the last call (g('c')) survives the 100ms of quiet, so fn runs exactly once with the most recent argument, logging c.

The pipeline is DOM + CSSOM → render tree → layout → paint → composite. Knowing it explains why blocking CSS/JS hurts first paint and why operations that force synchronous layout (layout thrashing) are expensive.

Both attributes make the download happen in parallel with parsing — the difference is execution timing. An async script runs as soon as it has arrived, whenever that is: script execution always happens on the main thread, so the parser pauses while it runs, and multiple async scripts execute in whatever order their downloads finish, not document order. A defer script waits until the parser has finished the whole document, then deferred scripts run in document order (even if a later one downloaded first), and all of them run before DOMContentLoaded fires. That makes defer the safe default for scripts that touch the DOM or depend on each other; async suits independent scripts like analytics.

CLS counts unexpected movement of visible elements: an image loading into unreserved space, a banner inserted above existing content, and a font swap that changes text metrics all move rendered content and produce layout-shift entries (CLS sums these over short session windows and reports the worst window). A slow server response delays rendering but moves nothing that was already painted — that hurts TTFB and LCP, not CLS. And a shift within 500ms of a discrete user interaction (like the accordion click) carries the hadRecentInput flag and is excluded, because movement the user just asked for is expected, not jank.