JavaScript DOM Interview Questions

The Document Object Model is a tree-shaped API representing HTML/XML documents. When the browser parses HTML, it creates nodes (document, elements, text). JavaScript can read and mutate this tree; changes can trigger rendering updates.

<ul id="menu"><li>Home</li></ul>

const menu = document.getElementById('menu');
console.log(menu.children.length); // 1

• What is the difference between DOM and BOM?
• What is a live vs static NodeList?
• How does the DOM relate to accessibility trees?

• Confusing DOM with the rendered pixels on screen
• Thinking the DOM is only HTML strings
• Forgetting text nodes exist between elements

Draw the tree for a page in your portfolio (header, main, footer) before an interview whiteboard question.

Legacy APIs: getElementById, getElementsByClassName, getElementsByTagName (often live HTMLCollections). Modern: querySelector / querySelectorAll (CSS selectors, static NodeLists). Prefer querySelector for flexibility; cache references if queried often.

document.querySelector('nav .active');
document.querySelectorAll('button[data-action]');

• When would you avoid querySelector?
• What is a live collection?
• How do you scope queries to a subtree?

• Calling querySelector inside hot loops without caching
• Using #id incorrectly in older IE contexts
• Assuming getElementsByClassName returns an array

Refactor one page to use data-* attributes and querySelectorAll for event delegation.

getElementById only finds by ID and is very fast. querySelector accepts any CSS selector (first match only). IDs must be unique; querySelector can target classes, attributes, and combinators.

document.getElementById('submit');
document.querySelector('#submit');
document.querySelector('form button.primary');

• Can IDs contain special characters?
• What does querySelectorAll return?
• How do you escape CSS in selectors?

• Using non-unique IDs then querying with querySelector
• Overusing complex selectors on huge documents
• Forgetting querySelector returns null

Use element.querySelector inside a modal component to limit search scope.

document.createElement(tag) builds an element node. Set content/properties, then attach with appendChild, insertBefore, or newer append/prepend/replaceChildren. Parent-child links update the tree immediately.

const li = document.createElement('li');
li.textContent = 'New item';
document.querySelector('ul').appendChild(li);

• What is DocumentFragment?
• Difference between append and appendChild?
• How do you remove a node?

• Appending HTML strings with innerHTML when structured nodes are safer
• Forgetting to set text before append
• Creating elements in a loop without a fragment (extra reflows)

Build a todo list that only uses createElement — great portfolio talking point.

textContent sets plain text; HTML characters are escaped and scripts won’t run. innerHTML parses HTML strings — powerful but dangerous with untrusted input. For user data, prefer textContent or sanitize HTML.

el.textContent = userInput; // safe
el.innerHTML = '<strong>Hi</strong>'; // trusted HTML only

• What is insertAdjacentHTML?
• Does innerHTML execute script tags?
• What about innerText?

• Injecting user input via innerHTML
• Using innerHTML for simple text labels
• Assuming innerHTML is faster in all cases

Audit your project for any dangerouslySetInnerHTML or innerHTML with API data.

After the target phase, most events bubble from the target up through ancestors to document. Handlers on parents run after the target’s handler (unless capture). Useful for delegation.

button.addEventListener('click', () => console.log('button'));
div.addEventListener('click', () => console.log('div'));
// click button logs: button, then div

• Which events do not bubble?
• What is the target vs currentTarget?
• How does capture phase work?

• Assuming all events bubble (focus/blur do not)
• Attaching duplicate handlers on every child
• Not understanding order with capture listeners

Explain how a click on a nested icon still triggers a card handler in your UI.

Capture travels from window down to the target before bubbling. Register with addEventListener(type, fn, { capture: true }) or third argument true. Rare for app logic; used for analytics, focus traps, or intercepting early.

div.addEventListener('click', () => console.log('capture'), true);
button.addEventListener('click', () => console.log('target'));

• Default capture value?
• How do stopPropagation and capture interact?
• Event delegation in capture phase?

• Enabling capture without reason and breaking expected order
• Confusing capture with passive listeners
• Forgetting removeEventListener needs same capture flag

Mention capture when discussing modal focus management in interviews.

Attach one listener on a parent; use event.target (and closest) to handle child interactions. Works for elements added later without rebinding. Reduces memory and setup cost for long lists.

list.addEventListener('click', (e) => {
  const btn = e.target.closest('button[data-id]');
  if (!btn || !list.contains(btn)) return;
  deleteItem(btn.dataset.id);
});

• When is delegation a bad idea?
• How does closest help?
• Performance on huge tables?

• Checking target without closest and mis-clicking nested spans
• Delegating on too high a node (document) carelessly
• Not filtering non-matching targets

Your dynamic comment list or table rows should use one delegated listener.

Cancels the browser’s default behavior for that event if cancelable is true — e.g. following a link, submitting a form, context menu. Does not stop propagation.

form.addEventListener('submit', (e) => {
  e.preventDefault();
  submitViaFetch(new FormData(form));
});

• Difference from stopPropagation?
• Is preventDefault always allowed?
• passive touch listeners?

• Calling preventDefault on non-cancelable events
• Preventing default but not handling validation UX
• Using return false in old inline handlers inconsistently

SPA login forms should preventDefault and show inline errors — demo in portfolio.

Stops the event from traveling to other elements in bubble or capture phases after the current listener runs (unless stopped earlier). Does not prevent default browser action.

inner.addEventListener('click', (e) => {
  e.stopPropagation();
});

• What is stopImmediatePropagation?
• Modal overlay clicks?
• Does it affect other event types on same element?

• Stopping propagation instead of fixing delegation logic
• Breaking document-level escape handlers unintentionally
• Mixing up with preventDefault

Card with inner buttons: explain when you stop propagation so row click doesn’t fire.

Attributes are in HTML markup (strings). Properties are JS object fields on DOM nodes; some mirror attributes, some don’t (value, checked). getAttribute/setAttribute vs .value / .checked.

<input id="x" value="initial">

const i = document.getElementById('x');
i.value = 'typed';
console.log(i.getAttribute('value')); // still 'initial'

• How does boolean attribute reflection work?
• custom data attributes?
• Why React uses value/checked carefully?

• Using setAttribute(‘value’) expecting current input text
• Reading href attribute vs property on anchors
• Confusing class attribute with className property

Debug a form bug by comparing attribute default vs live property value.

classList provides add, remove, toggle, contains, replace without manual string parsing. Respects multiple classes. For whole replacement, className or setAttribute('class') still exist.

panel.classList.toggle('open');
btn.classList.add('active');

• classList vs className performance?
• SVG classList quirks?
• How do frameworks batch class updates?

• Splitting className strings manually
• Assuming toggle returns void (it returns boolean)
• Forgetting to remove classes on state exit

Implement accordion open/close with classList only — simple interview exercise.

HTML data-* attributes expose a dataset object with camelCase keys (data-user-id → dataset.userId). Values are strings. Useful for config, delegation targets, and testing selectors.

<button data-action="delete" data-id="42">Del</button>

btn.dataset.action; // 'delete'

• Are dataset names validated?
• Can you store JSON in data attributes?
• Accessibility concerns?

• Storing large JSON in data attributes
• Wrong camelCase mapping
• Using dataset for visible content instead of text

Mark interactive cards with data-id for delegation in your project.

Both are key-value Web Storage APIs (strings only). localStorage persists until cleared per origin. sessionStorage lasts for the page session (tab). Same origin policy applies; ~5MB typical limit. Not sent on HTTP requests unlike cookies.

localStorage.setItem('theme', 'dark');
sessionStorage.setItem('draft', formText);

• How do you store objects?
• Storage events?
• IndexedDB when?

• Storing tokens without understanding XSS risk
• Not handling quota errors
• Using localStorage for large binary data

Theme toggle with localStorage is an easy portfolio feature to discuss.

DOMContentLoaded fires when HTML is parsed and deferred scripts run — DOM ready, images may still load. load fires when all resources (images, styles) finish. Prefer DOMContentLoaded for early DOM setup.

document.addEventListener('DOMContentLoaded', initUI);
window.addEventListener('load', () => console.log('all assets ready'));

• What about defer and async scripts?
• Is DOMContentLoaded before body end?
• document.readyState values?

• Waiting for window.load before harmless DOM work
• Attaching DOMContentLoaded after it already fired
• Blocking parse with sync scripts in head

Move init code to DOMContentLoaded to improve perceived load in demos.

Reflow (layout) recalculates geometry when size/position affecting styles change. Repaint redraws pixels (e.g. color) without layout. Reading layout properties after writes forces synchronous layout (thrashing). Batch DOM reads/writes.

// bad: interleaved read/write
els.forEach(el => { el.style.width = el.offsetWidth + 10 + 'px'; });

• What triggers reflow?
• What is requestAnimationFrame for?
• CSS containment?

• Measuring offsetHeight in a loop after style changes
• Animating top/left instead of transform
• Inserting many nodes one-by-one without fragment

Optimize a list filter that felt janky by batching DOM updates.

Use parentElement, children (elements only), childNodes (includes text), nextElementSibling / previousElementSibling, and closest for upward matching. Avoid brittle parentNode chains when closest works.

const row = btn.closest('tr');
const next = row.nextElementSibling;

• childNodes vs children?
• What is Node.ELEMENT_NODE?
• TreeWalker use cases?

• Using nextSibling and hitting text nodes
• Long parentElement loops instead of closest
• Assuming children includes text nodes

Walk from a click target to table row in a CRUD app exercise.

Key events: submit, input, change, focus, blur, invalid (constraint validation). input fires on each keystroke; change often on commit (select, blur). Use submit on form, not click on button only.

input.addEventListener('input', debounce(validate, 300));
form.addEventListener('submit', onSubmit);

• How does HTML5 validation work?
• preventDefault on invalid submit?
• FormData API?

• Listening only to click on submit button
• Confusing change vs input for text fields
• Not resetting validation UI on resubmit

Show client-side validation with reportValidity() in a portfolio form.

Prefer keydown/keyup; keypress is deprecated. Check event.key or code (physical key). Handle Enter/Space on custom controls; respect focus. Use modifiers (shiftKey) carefully.

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeModal();
});

• key vs code?
• How to avoid trapping keys globally?
• Roving tabindex?

• Breaking browser shortcuts without checking
• Relying on keypress
• Forgetting keyboard support on div buttons

Add Escape-to-close on modals and mention it in a11y interviews.

MutationObserver asynchronously watches DOM tree changes (child list, attributes, character data). Useful for widgets, testing, or syncing third-party DOM inserts — prefer framework patterns when possible.

const obs = new MutationObserver((mutations) => {
  console.log('DOM changed', mutations.length);
});
obs.observe(container, { childList: true, subtree: true });

• Performance cost?
• Difference from deprecated Mutation Events?
• disconnect when?

• Observing entire document subtree casually
• Doing heavy sync work in callback
• Using MO when events or framework state suffice

Mention MO when discussing embedding external scripts that mutate the DOM.

Shadow DOM attaches a hidden subtree to an element with scoped styles and DOM (element.attachShadow({ mode: 'open' })). Encapsulates internal structure from document.querySelector. Used in design systems and native elements.

const host = document.createElement('my-widget');
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = '<style>p{color:red}</style><p>Hi</p>';

• open vs closed shadow root?
• How do slots work?
• Shadow DOM vs React shadowing?

• Thinking Shadow DOM is the same as virtual DOM
• Piercing shadow for styling without ::part
• Assuming all frameworks use shadow DOM by default

Relate Shadow DOM to browser built-ins like <video> internals.

Use semantic elements, label controls, manage focus on dynamic updates, update ARIA live regions for async content, don’t rely on div-click alone. DOM changes should preserve logical tab order and announce important changes.

status.textContent = 'Saved';
status.setAttribute('role', 'status');

• When are ARIA roles needed?
• What is focus trap?
• aria-live polite vs assertive?

• Adding buttons as divs without keyboard support
• Removing focus outline in CSS
• Updating DOM without announcing errors to screen readers

After adding a toast via DOM, tie it to role=“status” in your app.

Build off-document with DocumentFragment or clone template, batch insert once. Or update data and re-render with a virtual DOM library. Avoid removing/re-adding entire list per keystroke.

const frag = document.createDocumentFragment();
items.forEach(t => { const li = document.createElement('li'); li.textContent = t; frag.appendChild(li); });
ul.replaceChildren(frag);

• When is innerHTML batch ok?
• Keyed lists in React?
• Virtual scrolling?

• innerHTML = ” then many appendChild in loop on live parent
• Re-querying list each iteration
• Not using replaceChildren/append with fragment

Compare naive vs fragment approach when profiling your todo app.

Nodes include elements, text, comments, document. Elements are nodeType ELEMENT_NODE only. Many properties exist on Node; Element adds tag-specific APIs (classList, attributes).

console.log(div.childNodes); // may include text nodes
console.log(div.children);   // elements only

• What is a Text node?
• Node.contains?
• Element.matches?

• Trimming HTML but leaving whitespace text nodes
• Using childNodes when you meant children
• Ignoring comment nodes in templates

Explain a bug where extra spacing came from text nodes between <li> elements.

element.remove() detaches from parent. replaceWith(newNode) swaps nodes. cloneNode(deep) copies; shallow omits children. Cloned nodes must be inserted to appear in document.

oldBanner.replaceWith(newBanner);
const copy = template.content.cloneNode(true);

• Does clone copy event listeners?
• template element?
• importNode?

• Expecting cloneNode to copy listeners
• Shallow clone losing nested structure
• Forgetting to insert cloned template content

Use <template> and cloneNode for repeatable card components in vanilla JS.

Third argument can be boolean (capture) or { capture, once, passive, signal }. passive: true helps scroll performance; prevents preventDefault on touch/wheel. once auto-removes after one invoke. signal from AbortController removes cleanly.

el.addEventListener('click', handler, { once: true });
ctrl.signal; // AbortController
el.addEventListener('scroll', onScroll, { passive: true });

• Why passive for touch?
• Memory leaks from anonymous listeners?
• Event listener on shadow root?

• Not matching capture flag on removeEventListener
• preventDefault on passive listener (ignored)
• Duplicating listeners on every render in SPAs

Use AbortController to tear down listeners when unmounting vanilla widgets.