What is the DOM?

LowEasyHtml

By FrontendAtlas Team · Updated Jan 30, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Browse HTML interview questions Explore interview tracks Browse company questions

Quick Answer

The DOM (Document Object Model) is a programming interface for web documents. It represents the structure of an HTML or XML document as a tree of nodes, allowing developers to read, modify, and manipulate the page’s content, structure, and styles dynamically using JavaScript.

Answer

The Core Idea

The Document Object Model (DOM) is how the browser represents a webpage in memory. When you load an HTML document, the browser doesn’t just display the raw text — it builds a structured tree of objects where each HTML element, attribute, and text becomes a node in that tree.

Developers use JavaScript to interact with this model — meaning they can change the content, styles, or even the structure of the page after it’s loaded, making webpages dynamic and interactive.

HTML

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

When this code is loaded by the browser, it creates a DOM tree that looks like this:

Document
 └── html
      └── body
           ├── h1 → 'Hello, World!'
           └── p → 'This is a paragraph.'

Each HTML tag becomes a node, and the hierarchy shows the parent-child relationships.

Node Type	Description	Example
Document Node	The root of the DOM tree, representing the entire HTML document.	document
Element Node	Represents an HTML tag (e.g., `<p>`, `<div>`).	document.querySelector('p')
Text Node	Contains the text within an element.	'Hello World' inside `<h1>`
Attribute Node	Represents an element’s attributes (e.g., class, id, href).	class='button'
Comment Node	Represents comments in the HTML code.	<!-- this is a comment -->

Types of nodes in the DOM tree.

How the DOM Works

The browser parses the HTML code from top to bottom.
It creates an in-memory tree of objects — this is the DOM.
JavaScript can use the document object to access and manipulate the DOM.

For example, you can modify text or styles on the fly:

const heading = document.querySelector('h1');
heading.textContent = 'Welcome to My Page!';
heading.style.color = 'blue';

Why the DOM is Important

It allows JavaScript to interact dynamically with HTML and CSS.
It enables real-time updates (e.g., changing text, images, or user interface).
It provides a structured API to access and modify any element or attribute.
Frameworks like React, Angular, and Vue all use the DOM (or a Virtual DOM) behind the scenes to update web pages efficiently.

JAVASCRIPT

// Selecting elements
const title = document.getElementById('main-title');

// Changing content
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated paragraph via JavaScript';

// Adding a new element
title.insertAdjacentHTML('afterend', '<p>New paragraph added!</p>');

The DOM and the BOM

While the DOM represents the structure of the webpage, the BOM (Browser Object Model) provides access to the browser environment itself — like the window, history, or location objects.

For example:

window.alert('Hello!'); // BOM
console.log(document.title); // DOM

They work together: the DOM manages the page, while the BOM manages the browser context.

Common Issues with DOM Manipulation

Performance Problems: Frequent updates to the DOM can cause reflows and repaints, slowing performance.
DOM Traversal Confusion: Using inefficient selectors can make code hard to maintain.
Timing Issues: Trying to manipulate DOM elements before they’re fully loaded (use DOMContentLoaded event).
Global Scope Pollution: Modifying the DOM without proper encapsulation can lead to naming conflicts.

Still so complicated?

Think of the DOM as a digital blueprint of your webpage. If HTML is the architect’s plan, the DOM is the 3D model that can be changed anytime — you can move walls (elements), repaint (CSS), or add furniture (content) using JavaScript.

Summary

The DOM is a tree-like structure representing every element in a webpage.
JavaScript uses the DOM API to create, delete, or modify elements dynamically.
Each part of a webpage — tags, text, and attributes — is represented as a node.
DOM manipulation is key for interactive web apps.
The DOM differs from the BOM, which controls the browser’s environment, not the document itself.