DOM and Events
You will learn how the browser models a document as a live tree of nodes and how events travel through that tree. This is the oldest and most reliably asked part of frontend interviewing, because every framework's virtual DOM and synthetic event system is a wrapper over these exact rules.
on this pageshowhide
explore
- The DOM Tree and Node Types5 questions
- Selection and Traversal APIs5 questions
- Creating and Moving Nodes6 questions
- Event Flow and Delegation5 questions
- addEventListener Options and Teardown5 questions
- Custom Events and EventTarget5 questions
- Pointer, Mouse, Keyboard, and Touch Events5 questions
questions
page 2 of 2Besides a function, addEventListener accepts an object as its listener argument. What must that object provide, and what is `this` inside it when the event fires?
basics
~10 sThe object must have a handleEvent method. The browser calls listener.handleEvent(event), and inside that method this is the listener object itself, not the element. Pass the same object to removeEventListener to unregister it.
You need a framework-free way for a plain JavaScript service object — a data store, not a DOM node — to notify subscribers. What does `class Store extends EventTarget` give you, and what does it not?
basics
~20 sExtending EventTarget gives any object the standard addEventListener, removeEventListener and dispatchEvent methods, including listener options such as once and signal. It gives no propagation, no listener introspection, and no way to know whether anyone subscribed.
During a DOM click dispatch, a handler near the target removes the clicked element from the document. Why do listeners on its former ancestors still run, and what do event.target.closest() and event.composedPath() each return after that removal?
basics
~20 sThe browser computes the propagation path once, when dispatch begins, so removing the target mid-dispatch does not reroute the event and ancestor listeners still run. closest() then walks the detached node's remaining ancestors and can return null, while composedPath() returns the path recorded at dispatch.
A legacy page renders with subtly wrong element widths, and document.compatMode reports "BackCompat". What has the browser done, what in the HTML caused it, and can you switch it at runtime?
basics
~20 s"BackCompat" means the browser parsed the page in quirks mode and is applying legacy layout rules, including the old box model where width includes padding and border. A missing or unrecognised DOCTYPE causes it, and the mode is fixed at parse time.
You take a node out of a same-origin iframe with iframe.contentDocument.querySelector('.row') and append it into the parent page. What happens to the node's ownerDocument, and why can `row instanceof HTMLElement` be false in the parent page?
basics
~20 sInserting the node adopts it: the browser changes its ownerDocument to the parent page's document and the append succeeds. Adoption does not change the object's prototype, which still comes from the iframe's realm, so instanceof against the parent window's HTMLElement fails.
How do you decide which selectors a shared widget's JavaScript uses to find its own DOM nodes, so that a CSS or markup refactor cannot silently break its behaviour?
basics
~20 sGive behaviour its own stable hooks — dedicated data-* attributes rather than styling class names — scope every query to the widget root, avoid structural selectors, and fail loudly when a required node is missing instead of silently doing nothing.
showing 31–36 of 36