What is the DOM?
The DOM (Document Object Model) is a programming interface that represents an HTML document as a structured tree of objects.
In simple words: the browser takes your HTML and converts it into a model that JavaScript can interact with.
HTML becomes a tree of objects that can be read and changed using JavaScript.
How does the DOM work?
When a browser loads a webpage, it:
- Reads the HTML file
- Breaks it into elements
- Creates a tree structure (DOM tree)
- Allows scripts to access and modify it
Example DOM tree
Document
└── html
├── head
│ └── title
└── body
├── h1
└── p
DOM vs HTML
- HTML → the code you write
- DOM → the browser’s live representation of that code
The DOM can change dynamically — even after the page loads — using JavaScript.
Why is the DOM important?
The DOM is what makes modern websites interactive.
- Changing text without reloading the page
- Showing or hiding elements
- Handling user clicks and input
- Updating styles dynamically
Example of DOM manipulation
// Change text using JavaScript
document.querySelector("h1").innerText = "Hello DOM!";
Here, JavaScript selects an HTML element and changes its content in real time.
How the DOM is structured
The DOM is structured like a family tree:
- Document → root of everything
- Elements → tags like <html>, <body>
- Nodes → every part of the page (text, attributes, elements)
Summary
The DOM is a bridge between HTML and JavaScript. It turns your webpage into a structured tree that can be dynamically accessed and modified.
Without the DOM, websites would be static and non-interactive.