WEB DEVELOPMENT

Home › Glossary › Web Development· 143 ·

DOM

\dɒm\abbr.

Filed underWeb DevelopmentFront EndApis

In brief · quick answer

The Document Object Model (DOM) is a programming interface that represents an HTML or XML document as a tree of objects that can be manipulated with scripts.

§ 1 Definition

The DOM (Document Object Model) is the bridge between your HTML markup and JavaScript code. When a browser loads an HTML page, it parses the markup into a tree structure where each element, attribute, and text node becomes an object. This tree is the DOM. Without the DOM, JavaScript could not interact with the page. Every `document.getElementById()`, every `element.addEventListener()`, and every framework re-render goes through the DOM. The DOM is not part of the JavaScript language. It is a Web API provided by the browser. The same concept applies to XML and SVG documents. Understanding the DOM is understanding how the browser sees your page.

§ 2 How it works

The DOM tree has a single root node (`document`). Child nodes branch out: elements, text, comments, and document type. Each element node has properties (`id`, `className`, `style`), methods (`appendChild()`, `remove()`, `querySelector()`), and can fire and receive events. The DOM API is extensive and includes traversal, manipulation, and event handling interfaces.

§ 3 Performance implications

Every DOM operation has a cost. Reading layout properties forces synchronous reflows. Adding many elements individually triggers multiple repaints. Modern frameworks use virtual DOMs or compile-time optimizations to minimize direct DOM access, but the underlying constraint remains: the DOM is the slowest part of client-side JavaScript execution.

§ 4 Common misconception

The DOM is not the same as HTML source code. The browser's internal representation can differ from the source due to JavaScript mutations, invalid markup correction, and missing optional tags. What you see in DevTools Elements panel is the live DOM, not the raw HTML file.

§ 5 Note

The `innerHTML` property is convenient but dangerous. It parses HTML strings and can introduce XSS vulnerabilities. Use `textContent` for text and `createElement()` for structured changes.

§ 6 In code

```javascript
// Access and modify the DOM
const heading = document.querySelector('h1');
heading.textContent = 'Updated title';
heading.classList.add('highlight');

// Create a new element
const p = document.createElement('p');
p.textContent = 'Dynamically added';
document.body.appendChild(p);
```

§ 7 Common questions

Q. Is the DOM part of JavaScript?: A. No. The DOM is a Web API provided by the browser. JavaScript is just the language used to interact with it.
Q. What is the shadow DOM?: A. Shadow DOM is a browser technology for encapsulating DOM subtrees and styles. It is part of the Web Components standard.

Key takeaways

The DOM is a tree representation of an HTML/XML document.
JavaScript uses the DOM API to read, modify, and react to page content.
DOM manipulation is performance-sensitive; minimize direct access in high-frequency code.

How Atomic Glue helps

Atomic Glue builds efficient, DOM-aware front-ends. We know when to touch the DOM directly and when frameworks do it better. Talk to us about your project.

Get in touch

# DOM

The Document Object Model (DOM) is a programming interface that represents an HTML or XML document as a tree of objects that can be manipulated with scripts.

Category: Web Development (also: Front End, Apis)

Author: Atomic Glue Team

## Definition

## How it works

## Performance implications

## Common misconception

## Note

The `innerHTML` property is convenient but dangerous. It parses HTML strings and can introduce XSS vulnerabilities. Use `textContent` for text and `createElement()` for structured changes.

## In code

## Common questions
Q: Is the DOM part of JavaScript?
A: No. The DOM is a Web API provided by the browser. JavaScript is just the language used to interact with it.
Q: What is the shadow DOM?
A: Shadow DOM is a browser technology for encapsulating DOM subtrees and styles. It is part of the Web Components standard.

## Key takeaways

The DOM is a tree representation of an HTML/XML document.
JavaScript uses the DOM API to read, modify, and react to page content.
DOM manipulation is performance-sensitive; minimize direct access in high-frequency code.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/dom