When you're just starting out in frontend development, one term that comes up a lot is DOM. You might have heard it in tutorials, read about it in docs, or even seen errors that mention it — but what is it exactly?
In this post, I’ll explain the DOM like you’re five (okay, maybe more like fifteen), and show how it powers the magic behind every interactive website you use.
🌳 What Is the DOM?
The DOM stands for Document Object Model.
Think of the DOM as a tree structure that represents the content of a web page. Every HTML element becomes a node in this tree.
When your browser loads a web page, it parses the HTML and builds the DOM from it. JavaScript can then interact with this DOM to read, change, add, or remove elements from the page — in real time!
📌 DOM is not the HTML itself — it's a live representation of it in memory.
🧩 DOM Tree: A Simple Visual
Let’s say you have this HTML:
html
<html>
<body>
<h1>Hello World</h1>
<p>This is a paragraph</p>
</body>
</html>
Top comments (0)