51
What is the DOM in JavaScript?
The DOM, or Document Object Model, is the browser's object representation of an HTML document. It exposes the page as a tree of nodes that JavaScript can read and modify.
JavaScript Interview
DOM, Events & Event Loop Fundamentals
JavaScript interview questions covering the DOM, selectors, DOM updates, browser events, propagation, delegation, forms, the call stack and event loop.
25 Questions Filter by level
Interview questions
Open a question for the full answer, code and interview guidance.
52
What is the difference between document.getElementById() and querySelector()?
getElementById searches for an element by its id and returns that element or null. querySelector accepts any valid CSS selector and returns the first matching element or null.
53
What is the difference between querySelector() and querySelectorAll()?
querySelector returns only the first element matching a CSS selector. querySelectorAll returns a static NodeList containing all matching elements.
54
What is the difference between an HTMLCollection and a NodeList?
Both represent collections of DOM nodes, but they are produced by different DOM APIs and can have different behavior. Many HTMLCollection objects are live, meaning they reflect relevant DOM changes automatically. A NodeList may be live or static depending on the API; querySelectorAll returns a static NodeList.
55
How do you create and insert a new DOM element?
Use document.createElement to create an element, configure its content, attributes, classes, or other properties, and then insert it with methods such as append, appendChild, prepend, before, or after.
56
What is the difference between innerHTML and textContent?
innerHTML reads or writes HTML markup inside an element, so assigned markup is parsed into DOM nodes. textContent reads or writes plain text and does not interpret HTML tags.
57
How do classList methods work?
The classList property provides a convenient API for manipulating an element's CSS classes. Common methods include add, remove, toggle, contains, and replace.
58
How do getAttribute(), setAttribute(), and dataset work?
getAttribute reads an attribute's string value, while setAttribute creates or updates an attribute. For custom data-* attributes, dataset provides a convenient object-style interface.
59
What is an event in JavaScript?
An event is a notification that something occurred in the browser or application environment. Examples include click, input, change, submit, keydown, focus, and load.
60
How does addEventListener() work?
addEventListener registers a callback for a specified event type on an event target. Multiple listeners can be registered for the same event without overwriting one another.
61
What is the event object?
When an event listener runs, the browser passes an event object containing information about the event. Common properties include type, target, currentTarget, and methods such as preventDefault and stopPropagation.
62
What is the difference between event.target and event.currentTarget?
event.target is the element where the event originated, which may be a descendant of the element whose listener is currently running. event.currentTarget is the element whose event listener is currently being executed.
63
What is event bubbling?
Event bubbling is the phase in which an event that originated on a descendant propagates upward through its ancestors. For many common events, listeners registered in the default mode run during this bubbling phase.
64
What is event capturing?
Capturing is the propagation phase that travels from the outer document hierarchy toward the event target before the target and bubbling phases. A listener can participate in capturing by passing { capture: true } or true to addEventListener.
65
What does event.preventDefault() do?
preventDefault asks the browser not to perform the event's normal default action when that action is cancelable. For example, it can prevent a form submission or stop a link from navigating.
66
What does event.stopPropagation() do?
stopPropagation prevents an event from continuing through later ancestors in the capturing or bubbling propagation path. It does not automatically cancel the browser's default action.
67
What is event delegation?
Event delegation registers a listener on a common ancestor instead of adding a separate listener to every child element. The handler examines event.target, often with closest, to determine which relevant descendant triggered the event.
68
Why is event delegation useful for dynamically created elements?
A listener attached directly to existing child elements does not automatically attach itself to new child elements added later. With delegation, the stable ancestor already has the listener, and bubbled events from new descendants reach it.
69
What is the difference between input and change events?
The input event generally fires whenever the value of an input-like control changes through user interaction, making it suitable for live validation or search. The change event generally fires when a value is committed, with exact timing depending on the control type.
70
How do you handle form submission with JavaScript?
Listen for the form's submit event rather than relying only on a button's click event. The submit event also covers keyboard submission and other valid ways a form can be submitted.
71
What is the difference between DOMContentLoaded and load?
DOMContentLoaded fires after the HTML document has been parsed and the DOM is ready, without waiting for every image and other external resource to finish loading. The window load event fires after the page and its dependent resources have finished loading.
72
What is the difference between synchronous and asynchronous JavaScript?
Synchronous code executes in sequence, and a long-running operation can prevent later work on the same thread from progressing. Asynchronous APIs allow work such as timers, network requests, or other external operations to complete later while JavaScript can continue processing other tasks.
73
What is the JavaScript call stack?
The call stack tracks active execution contexts for functions currently being executed. When a function is called, a frame is pushed onto the stack; when it returns, that frame is removed.
74
What is the JavaScript event loop?
The event loop coordinates execution between the JavaScript call stack and work scheduled by the runtime. When the call stack becomes available, queued work can be selected for execution according to the runtime's scheduling rules.
75
What is the difference between microtasks and macrotasks/tasks?
Microtasks include promise reaction callbacks and queueMicrotask callbacks. Tasks, often informally called macrotasks, include work such as timer callbacks and many browser events.