Introduction
When learning JavaScript, you’ll often hear this line:
JavaScript interacts with the webpage through the DOM.
For beginners, this can feel confusing:
In this blog, you’ll understand the DOM from scratch with examples and how JavaScript brings web pages to life.
What is the DOM?
DOM stands for Document Object Model.
This is the structured(tree-like) representation of your HTML page that the browser creates so JavaScript can interact with it.
HTML vs DOM
Let’s clear very common confusion.
- HTML is a static text file
- DOM is a dynamic, a tree like structure creat…
Introduction
When learning JavaScript, you’ll often hear this line:
JavaScript interacts with the webpage through the DOM.
For beginners, this can feel confusing:
In this blog, you’ll understand the DOM from scratch with examples and how JavaScript brings web pages to life.
What is the DOM?
DOM stands for Document Object Model.
This is the structured(tree-like) representation of your HTML page that the browser creates so JavaScript can interact with it.
HTML vs DOM
Let’s clear very common confusion.
- HTML is a static text file
- DOM is a dynamic, a tree like structure created by the browser
Example:
<h1>Hello</h1>
<p>How is it going?</>
The browser turns this into a tree like structure:
document
|__ html
|__ body
|
p__|__ h1
DOM is stored in-memory by the browser.
DOM allows JavaScript to access and manipulate the elements/content in the webpage.
Each element in a DOM could be a node and each node could have a child node.
Example:
<body>is the parent node<p> & <h1>are its child nodes
How JavaScript Interacts with the DOM
JavaScript uses built-in browser APIs to read and manipulate the DOM.
Let’s look at what JavaScript can actually do.
Access Elements on the Page
const heading = document.querySelector("h1");
Change Content Dynamically
heading.textContent = "Welcome to JavaScript!";
Change Styles Using JavaScript
heading.style.color = "blue";
Respond to User Actions
document.querySelector("button").addEventListener("click", () => {
alert("Button clicked!");
});
Create and Remove Elements
const p = document.createElement("p");
p.textContent = "This is a new paragraph";
document.body.appendChild(p);
Conclusion
Let’s summarize:
-
The DOM is a browser-created structure representing your HTML
-
It is organized like a tree
-
JavaScript uses the DOM to:
-
Read content
-
Update text and styles
-
Respond to user actions
-
Add or remove elements dynamically
-
This is how web pages become interactive and dynamic
Once you understand the DOM, JavaScript will make much more sense.
References & Further Reading
MDN Web Docs – DOM Introduction