DOM

The DOM (Document Object Model) is the browser's live, in-memory representation of an HTML document as a tree of objects. JavaScript interacts with the page exclusively through this API — every element, attribute, and text node is an object you can read, create, modify, or remove.

Selecting Elements

• querySelector(selector) returns the first element matching a CSS selector, or null if none found. querySelectorAll(selector) returns a static NodeList of all matches.
• getElementById(id) returns a single element by its unique ID. Only available on document, not on arbitrary elements.
• getElementsByClassName and getElementsByTagName return live HTMLCollection objects that update automatically when the DOM changes. Prefer querySelector/querySelectorAll in modern code for consistency and flexibility.
• A NodeList is not an array — it lacks methods like push and map. Convert with Array.from(nodeList) or spread [...nodeList] when you need array methods.

Modifying Content

• textContent gets or sets the text of an element. It is safe against XSS because it does not parse HTML.
• innerHTML gets or sets the HTML markup inside an element. Setting innerHTML with untrusted input is a security risk (XSS vulnerability). Prefer textContent for plain text.
• element.setAttribute(name, value) and element.getAttribute(name) read and write HTML attributes. For data attributes, use element.dataset which provides a DOMStringMap of all data-* attributes.
• element.classList provides add(), remove(), toggle(), and contains() for class manipulation without overwriting existing classes.

Creating and Removing Elements

• document.createElement(tag) creates an element in memory — it is not yet in the DOM. You must insert it with parentElement.appendChild(element) or the newer parent.append(element) (which also accepts strings).
• element.remove() removes an element from the DOM directly. The older pattern parent.removeChild(child) is still widely used.
• For batch insertions, use DocumentFragment to build a subtree in memory and insert it in a single operation, avoiding repeated reflows.

Performance Considerations

• Each DOM modification can trigger reflow (layout recalculation) and repaint. Batch reads and writes separately to avoid layout thrashing.
• Use event delegation (attach one listener on a parent) instead of attaching listeners to many child elements — this reduces memory usage and works automatically with dynamically added elements.
• CSS transforms and opacity changes are cheaper than modifying layout properties like width, height, or top.

Key Interview Distinction: querySelector vs getElementById querySelector accepts any CSS selector and works on any element as a scoped search. getElementById only works on document, only matches IDs, but is slightly faster for single-ID lookups. In practice, querySelector is preferred for its flexibility. Interviewers also commonly ask about live vs static collections: getElementsByClassName returns a live HTMLCollection that updates automatically, while querySelectorAll returns a static NodeList that is a snapshot at call time.