DOM & Browser

No questions match those filters.

1. 01 What is event delegation and why is it more performant than attaching listeners to every child element? Easy
2. 02 Explain event bubbling vs event capturing, and how `addEventListener`'s third argument controls this. Medium
3. 03 Implement event delegation for a dynamically generated list, using `event.target.closest()` to identify the clicked item. Medium
4. 04 Explain `stopPropagation` vs `stopImmediatePropagation` vs `preventDefault` with examples of when each is needed. Medium
5. 05 How would you delegate `focus`/`blur` events, which don't bubble by default? Hard
6. 06 Explain `MutationObserver` and a real use case for observing DOM changes efficiently. Medium
7. 07 Explain `IntersectionObserver` and how it enables efficient lazy-loading of images without scroll listeners. Medium
8. 08 Explain `ResizeObserver` and how it differs from listening to the `window.resize` event. Medium
9. 09 What is the History API (`pushState`/`replaceState`)? How does it power SPA client-side routing? Medium
10. 10 Explain the Clipboard API and how to implement a secure copy-to-clipboard button. Easy
11. 11 What is the Page Visibility API and how would you use it to pause expensive work in background tabs? Medium
12. 12 Explain the difference between the DOM and the HTML source — why is the DOM described as a 'live tree'? Easy
13. 13 What causes layout thrashing (forced synchronous reflow)? Show a code example and how to fix it by batching reads/writes. Hard
14. 14 Explain the difference between `innerHTML`, `textContent`, and `innerText`, including security implications. Medium
15. 15 How would you efficiently insert 10,000 list items into the DOM without freezing the UI (DocumentFragment / virtualization)? Hard
16. 16 Explain `NodeList` vs `HTMLCollection` — which is live and which is static, and why does it matter? Medium
17. 17 What is the Shadow DOM and how does it provide style/DOM encapsulation for Web Components? Hard
18. 18 Explain reflow vs repaint vs composite in the browser rendering pipeline and which CSS/JS changes trigger each. Hard
19. 19 What is the Browser Object Model (BOM) and how does it differ from the DOM? Easy
20. 20 Explain the `window` object's role as the global object in browsers. Easy
21. 21 How would you detect the user's screen size, viewport, and device pixel ratio for responsive JS logic? Medium
22. 22 Explain `navigator.onLine` and the `online`/`offline` events for building offline-aware UIs. Medium
23. 23 What is the difference between `location.href`, `location.assign`, and `location.replace` for navigation? Medium