Difference between DOM and HTML

JavaScriptJunior~3 min read

HTML and the DOM are different things that are simply closely related: HTML is the text markup of a page, while the DOM is the object model of that page which the browser creates in memory after parsing. HTML describes what should be on the page, and the DOM is what lets you work with it programmatically.

Theory

TL;DR

HTML is a markup language: a static text document describing the structure and content of a page.
The DOM is the object representation of the document, built by the browser after the HTML is loaded and parsed.
HTML lives in a file, the DOM lives in the browser's memory.
JavaScript does not change the HTML file, it changes the DOM, and the browser repaints the page.
HTML is the blueprint, the DOM is the live model of that blueprint.

Quick example

HTML:

html

<p id="text">Hello</p>

Accessing the DOM from JavaScript:

javascript

const element = document.getElementById('text');
console.log(element.textContent); // "Hello"

element.textContent = 'Good day!';

Nothing changed in the HTML, but in the DOM the paragraph text was updated and the browser repainted the page.

What HTML is

HTML (HyperText Markup Language) is a markup language that describes the structure and content of a web page. It is a text document that reads roughly like this:

html

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, world!</h1>
    <p>This is an example page.</p>
  </body>
</html>

It is not executed; it only states which elements exist on the page and how they are nested inside one another.

What the DOM is

The DOM (Document Object Model) is the object representation of an HTML document that the browser creates after loading and parsing the HTML. When the browser reads the HTML file, it builds a tree of objects: every HTML tag becomes a DOM object.

For example, the markup above turns into this structure:

text

Document
+-- html
    +-- body
        +-- h1
        +-- p

In JavaScript it is available as objects:

javascript

document.body.querySelector('h1').textContent; // "Hello, world!"

Key differences

Trait	HTML	DOM
What it is	Text markup	An object model in memory
Where it lives	In a file (`.html`)	In the browser (in RAM)
Changed by JavaScript	No, it is a static file	Yes, through APIs such as `document.querySelector()`
What it looks like	Tags (`<h1>`, `<p>`, ...)	Objects (`document.body`, `element.innerText`, ...)
When it is created	Written in advance and served on load	After the browser parses the HTML
Purpose	Describing the structure	Working with that structure in code

In short

What	Definition
HTML	The language that describes the structure of a page
DOM	The object model of that HTML, created by the browser
HTML into DOM	The browser turns tags into a tree of objects
JavaScript into DOM	Lets you change the page dynamically

An analogy: HTML is the blueprint of the page, and the DOM is the live model of that blueprint which can be changed through JavaScript. The bottom line: HTML is "what was written", the DOM is "what the browser turned it into and what you can work with programmatically".

Common mistakes

Believing that changing the DOM edits the HTML file. After a reload every change is gone: the server serves the same original document.
Thinking the DOM is a literal copy of the markup. The browser fixes broken markup and inserts missing nodes (html, body, tbody), so the tree can differ from the text of the file.
Confusing "view page source" with the Elements panel in DevTools. The first shows the HTML, the second shows the current state of the DOM, and once scripts have run they differ.
Equating the DOM with the CSSOM or the render tree. The DOM is only the document structure; the render tree is built from the DOM plus the CSSOM and excludes, for example, elements with display: none.
Reading the DOM before parsing has finished. A script that runs ahead of the markup simply will not see the nodes it needs.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.