Document Object Model

Definition

The DOM is a tree of document, element, text, and other nodes created when a browser parses HTML. It is also the set of interfaces scripts use to inspect, create, update, move, and remove those nodes.

Source versus DOM

The DOM is not always identical to the source file. HTML error recovery can insert omitted nodes or move invalidly nested content. Developer tools usually show the current DOM after parsing and script changes, while View Source shows the received text.

Events and updates

Events travel through the tree and allow code to respond to interaction. Changing text or attributes can update rendering and accessibility state. Replacing large subtrees can lose focus, selection, event state, and user input.

Accessibility relationship

Browsers derive much of the accessibility tree from DOM elements, attributes, text, and state. Visual CSS alone does not create a button role or label. DOM order also supplies the baseline reading and sequential focus order.

Common failures

• Debugging source while a script changed the live DOM.
• Injecting untrusted text as executable HTML.
• Replacing a focused subtree without restoring context.
• Assuming visual order changes reading or keyboard order.

Review question

Does the inspected DOM contain the semantics, text, state, and order you expect after parsing, interaction, failure, and narrow-screen reflow?