JavaScript DOM Interview Questions

The DOM tree — nodes, elements, and the distinction

// The DOM has several node types — not everything is an element
// Node.ELEMENT_NODE   (1) — 
, 
,  etc.
// Node.TEXT_NODE      (3) — the text content inside elements
// Node.COMMENT_NODE   (8) — 
// Node.DOCUMENT_NODE  (9) — the document itself

// All elements ARE nodes, but not all nodes are elements
// This matters for traversal:
const div = document.querySelector('div')

div.childNodes    // NodeList of ALL children — elements, text nodes, comments
div.children      // HTMLCollection of ELEMENT children only — no text nodes

div.firstChild    // first child node (might be a text node — whitespace!)
div.firstElementChild   // first child ELEMENT — skips text nodes

div.nextSibling         // next node (might be whitespace text)
div.nextElementSibling  // next element sibling

Querying the DOM — the modern API

// querySelector / querySelectorAll — CSS selector syntax, most flexible
const header     = document.querySelector('#header')           // first match
const allButtons = document.querySelectorAll('button.primary') // NodeList
const nested     = container.querySelector('.item:first-child') // scope to element

// querySelectorAll returns a STATIC NodeList — snapshot at query time
// It does NOT update as the DOM changes
const items = document.querySelectorAll('.item')
document.querySelector('.item').remove()
items.length  // still the original count — static snapshot

// getElementById — fastest single-element lookup (direct hash lookup internally)
const el = document.getElementById('main')  // no # prefix

// getElementsByClassName / getElementsByTagName — return LIVE HTMLCollections
const liveList = document.getElementsByClassName('item')
// liveList updates automatically when DOM changes — can cause infinite loops!
for (let i = 0; i < liveList.length; i++) {
  liveList[i].remove()  // ❌ infinite loop — removing shifts elements, liveList shrinks
}

// Safe: convert to array first
Array.from(liveList).forEach(el => el.remove())  // ✓ static copy

// closest() — walk UP the tree
const cell = document.querySelector('td')
const table = cell.closest('table')  // finds nearest ancestor matching selector
const form  = cell.closest('form')   // null if none found — never throws

Reading and writing content

const el = document.querySelector('.message')

// innerHTML — parses as HTML — XSS risk with user content
el.innerHTML = 'Hello'  // renders as bold
el.innerHTML = userInput                 // ❌ DANGEROUS — XSS if userInput has '  // displays as literal text, safe

// innerText — like textContent but respects CSS visibility and triggers reflow
// Avoid innerText in performance-sensitive code — reading it forces layout

// For inserting HTML safely:
el.textContent = ''  // clear
const strong = document.createElement('strong')
strong.textContent = userInput  // safe — sets text, not HTML
el.appendChild(strong)

Creating and inserting nodes

// Creating elements
const card = document.createElement('div')
card.className = 'card'
card.dataset.id = '42'   // sets data-id attribute

const text = document.createTextNode('Hello')
const frag = document.createDocumentFragment()  // off-DOM container

// Insertion methods — modern API
const parent = document.querySelector('.list')

parent.append(card)           // insert at END — accepts nodes AND strings
parent.prepend(card)          // insert at START
card.before(otherCard)        // insert BEFORE card (as sibling)
card.after(otherCard)         // insert AFTER card (as sibling)
card.replaceWith(newCard)      // replace card with newCard

// Old API (still works)
parent.appendChild(card)
parent.insertBefore(card, referenceNode)
parent.removeChild(card)

// insertAdjacentHTML — insert HTML at specific positions without reparsing parent
el.insertAdjacentHTML('beforebegin', '
before
')  // before el
el.insertAdjacentHTML('afterbegin',  '
first child
')
el.insertAdjacentHTML('beforeend',   '
last child
')
el.insertAdjacentHTML('afterend',    '
after
')   // after el

DocumentFragment — batch DOM updates for performance

// ❌ Inserting in a loop — each insertion triggers layout recalculation
const list = document.querySelector('ul')
items.forEach(item => {
  const li = document.createElement('li')
  li.textContent = item.name
  list.appendChild(li)  // 100 DOM insertions = up to 100 reflows
})

// ✓ DocumentFragment — build off-DOM, insert once
const frag = document.createDocumentFragment()
items.forEach(item => {
  const li = document.createElement('li')
  li.textContent = item.name
  frag.appendChild(li)  // no reflow — fragment is not in the document
})
list.appendChild(frag)  // ONE insertion, ONE reflow

// Modern alternative: innerHTML assignment (also single parse)
list.innerHTML = items.map(item =>
  `
${escapeHTML(item.name)}
`  // must escape user content!
).join('')

Attributes vs properties — a critical distinction

const input = document.querySelector('input')

// Attributes — in the HTML, accessed via getAttribute/setAttribute
// They are always strings
input.setAttribute('value', 'hello')
input.getAttribute('value')  // 'hello'

// Properties — on the DOM object, typed (string/boolean/number/object)
input.value    // current value — changes as user types
input.checked  // boolean — not a string
input.disabled // boolean

// The key difference:
// - getAttribute('value') → the INITIAL value from HTML
// - input.value          → the CURRENT value (changes with user input)
input.setAttribute('value', 'initial')
// user types 'changed'
input.getAttribute('value')  // 'initial' — HTML attribute unchanged
input.value                  // 'changed' — DOM property updated

// Boolean attributes — presence means true, absence means false
input.setAttribute('disabled', '')     // sets disabled
input.removeAttribute('disabled')      // removes disabled
input.disabled = true                  // property setter — cleaner
input.disabled = false                 // removes the attribute-like behavior

// data-* attributes ↔ dataset property
el.setAttribute('data-user-id', '42')
el.dataset.userId   // '42' — camelCase conversion is automatic
el.dataset.userId = '99'  // sets data-user-id="99"

Event delegation — one listener, many elements

// ❌ A listener on every element — memory-heavy, breaks for dynamic content
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', handleClick)
  // 1000 buttons = 1000 listeners
  // Buttons added later don't get the listener
})

// ✓ Event delegation — one listener on the parent, check the target
document.querySelector('.button-container').addEventListener('click', (e) => {
  const btn = e.target.closest('.btn')  // handle clicks that bubble up from children
  if (!btn) return                       // click was on container, not a button
  handleClick(btn)
})

// Works for dynamically added elements automatically
// Works for elements nested inside .btn (e.target might be an icon inside the button)
// .closest() walks up from the actual click target to find the right ancestor

// e.target vs e.currentTarget:
// e.target         — the element that was actually clicked
// e.currentTarget  — the element the listener is attached to (always the container)

// Stopping propagation:
e.stopPropagation()   // prevents bubbling to parent listeners
e.preventDefault()    // prevents the default browser action (form submit, link nav)
// These are independent — you can call one, both, or neither

Layout thrashing — the most expensive DOM mistake

// Reading layout properties (offsetWidth, getBoundingClientRect, scrollTop, etc.)
// forces the browser to flush any pending style changes and recalculate layout
// This is called a "forced synchronous layout" — it's expensive

// ❌ Layout thrashing — read/write interleaved in a loop
elements.forEach(el => {
  const height = el.offsetHeight    // forces layout recalculation
  el.style.height = height + 10 + 'px'  // invalidates layout
  // next iteration: height read forces layout recalculation AGAIN
})

// ✓ Batch reads first, then writes
const heights = elements.map(el => el.offsetHeight)  // read phase — one layout calc
elements.forEach((el, i) => {
  el.style.height = heights[i] + 10 + 'px'           // write phase — one reflow
})

// requestAnimationFrame — defer writes to the next paint cycle
function updateLayout() {
  requestAnimationFrame(() => {
    // Inside rAF: browser has already done layout for this frame
    // writes here are batched until next frame
    elements.forEach(el => el.style.transform = computeTransform(el))
  })
}

// ResizeObserver — modern way to react to size changes without polling
const observer = new ResizeObserver(entries => {
  entries.forEach(({ contentRect, target }) => {
    adjustChildren(target, contentRect.width)
  })
})
observer.observe(container)