DOM vs HTML

Introduction

The DOM is a live representation of the HTML. When JavaScript modifies the DOM, the browser re-renders accordingly — but the HTML file itself never changes.

Key Concept

// When you modify the DOM, the page updates
document.body.innerHTML = '<h1>New Content</h1>';
// The HTML file is NOT changed, but the page renders differently

HTML vs DOM

Aspect	HTML	DOM
Location	On disk (file)	In memory (browser)
Updates	Requires page reload	Live, updates instantly
Dynamic content	Static	Can be changed dynamically
Errors	Browser parses forgivingly	DOM is already parsed

How Changes Work

Browser loads HTML file
Parses HTML → creates DOM tree
JavaScript modifies DOM nodes
Browser re-renders based on DOM changes
Original HTML file remains unchanged

Summary

DOM is the live, in-memory representation of the page
Modifying the DOM updates what the user sees
The original HTML file is never modified
DOM manipulation is how JavaScript creates interactivity

DOM vs HTML

DOM vs HTML

Introduction

Key Concept

HTML vs DOM

How Changes Work

Summary

Further Reading