DOM tree

The DOM is a live object graph representing the parsed document. Elements, text nodes, attributes, and document fragments expose APIs for querying, traversal, mutation, and measurement. It is not the same as the original HTML string or the final accessibility tree, and mutations can trigger rendering work later in the frame.

					const list = document.querySelector('[data-list]');
const item = document.createElement('li');
item.textContent = 'New row'; // safer than innerHTML for plain text
list.append(item);
				

Attributes live on markup; properties reflect the live object state (for example `value` on inputs). Reading layout properties after writes can force style and layout to complete synchronously.

On interviews: explain how selectors, node types, attributes versus properties, and DOM mutations relate to rendering cost.

Common pitfalls: treating innerHTML as harmless can create XSS risk. Repeated DOM writes mixed with measurement can force layout work.

The trade-off is convenient HTML injection versus safe text APIs and batched updates.

Checklist:

• Distinguish HTML source from live DOM.
• Know nodes, elements, and document fragments.
• Batch mutations; avoid read-write interleaving.
• Avoid unsafe HTML injection.