Suggest an editImprove this articleRefine the answer for “Difference between DOM and HTML”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**HTML is a markup language, a plain text file describing the structure of a page; the DOM is the object representation of that document which the browser builds in memory after parsing the HTML.** HTML is not executed and cannot be changed from code, while the DOM is a live tree of objects that JavaScript reads and modifies through APIs such as `document.querySelector()`. Changing the DOM repaints the page immediately, yet the original `.html` file stays exactly the same. ```javascript const element = document.getElementById('text'); element.textContent = 'Hi'; // the DOM changed, the HTML file did not ``` **Key point:** HTML is what was written, the DOM is what the browser turned it into and what you can work with programmatically.Shown above the full answer for quick recall.Answer (EN)Image**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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.