The DOM (Document Object Model) is a programming interface for web documents.
In simple terms:
- When a web page (HTML or XML) is loaded into the browser, the browser creates a DOM representation of that document.
- It represents the page as a tree structure of nodes (objects), where each element, attribute, and piece of text in the HTML is a node in the tree.
- JavaScript (and other languages) can use the DOM API to access, manipulate, and update the content, structure, and styles of the page dynamically.
Example
If you have an HTML document:
<html>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
The DOM representation looks like a tree:
Document
└── html
└── body
├── h1 ("Hello World")
└── p ("This is a paragraph.")
Key Points
- Tree Structure → Every HTML element becomes a node in a hierarchical tree.
- Dynamic Access → JavaScript can use DOM methods like
getElementById(),querySelector(),createElement(), etc. - Live Representation → If the HTML changes (e.g., via JavaScript), the DOM updates instantly.
👉 In short: The DOM is the bridge between HTML/CSS and JavaScript, letting us make web pages interactive and dynamic.