DOM Tree

The DOM tree represents an HTML document as interconnected nodes that scripts can inspect and modify. It gives JavaScript a structured interface for reading content, changing elements, and responding to user interaction.

The DOM (Document Object Model) is a programming representation of an HTML document. A browser parses the HTML and creates a tree of nodes, with the document at the root and elements, text, and other node types beneath it.

Each HTML element becomes an element node, and relationships such as parent, child, and sibling describe the document structure. For example, a `div` containing a `p` creates a parent-child relationship between those corresponding nodes.

JavaScript can access the tree through APIs such as `document.querySelector()`, `querySelectorAll()`, and `getElementById()`. Once a node is found, code can inspect properties such as `textContent` or attributes and can modify the document.

DOM changes affect the document represented in memory and can cause the browser to update what is rendered. The DOM is therefore distinct from the original HTML source: after scripts run, the current DOM can differ from the markup initially delivered by the server.

Key points

• HTML is parsed into a tree of DOM nodes.
• Elements have parent, child, and sibling relationships.
• JavaScript can traverse and modify the DOM through browser APIs.
• The current DOM can differ from the original HTML source.
• `document.querySelector()` is a common way to find an element.

Interview questions

What is the DOM?

The DOM is the browser's object representation of an HTML document. It organizes document content into a tree of nodes with parent-child relationships. JavaScript can use DOM APIs to find, read, create, and modify those nodes. Changes to the DOM can change what the browser displays.

What is the difference between an element and a node?

A node is a general type in the DOM tree, while an element is a specific kind of node representing an HTML element. The DOM can also contain text nodes, comments, and the document node. Therefore, every element is a node, but not every node is an element. APIs such as `children` specifically work with element children, while `childNodes` can include non-element nodes.

How do you select an element from the DOM?

Common methods include `getElementById()` and `querySelector()`. `getElementById()` finds an element by its ID, while `querySelector()` accepts a CSS selector and returns the first matching element. For multiple matches, `querySelectorAll()` returns a collection of matching elements. The choice depends on whether the code needs one specific element or a set of matches.

How can JavaScript modify the DOM?

JavaScript can change existing nodes or create new ones using DOM APIs. For example, `textContent` changes an element's text, `setAttribute()` changes an attribute, and `appendChild()` inserts a node into the tree. Elements can also be created with `document.createElement()`. These operations change the current DOM and may cause the browser to update the rendered page.

Why might direct DOM manipulation become a performance concern?

DOM operations can interact with the browser's rendering pipeline, so excessive or poorly organized changes may increase layout, style, or paint work. Repeated reads and writes that force layout recalculation can be particularly expensive. A common approach is to reduce unnecessary DOM updates and batch related changes. The appropriate optimization depends on the workload, so performance should be measured rather than assumed.