What is DOM?
DOM stands for Document Object Model.
DOM is a bridge between HTML and JavaScript. It helps JavaScript to access and change HTML elements.
When a web page loads in the browser, the browser creates a DOM tree from the HTML document.
Using DOM, JavaScript can:
- Change text in a webpage.
- Change images.
- Change styles (color, size, background, etc.).
- Hide or show elements.
- Add or remove HTML elements.
- Respond to user actions like clicks and keyboard inputs.
What does "Document Object Model" mean?
1. What is Document?
The Document means the complete HTML page loaded in the browser.
Example:
<body>
<h1>Hello</h1>
<button>Click Me</button>
</body>
This entire HTML page is called a Document.
In JavaScript, we use the document object to access the webpage.
Example:
document.getElementById("name");
2. What is Object?
In JavaScript, everything inside the DOM is treated as an Object.
For example:
-
<h1>is an object. -
<button>is an object. -
<img>is an object.
Because they are objects, they have:
- Properties
- Methods
Example:
text.innerText = "Hello";
-
innerTextis a property. - We are changing the object's value.
3. What is Model?
The word Model means the browser represents the HTML page in a tree structure.
Example:
<body>
<div>
<h1>Hello</h1>
</div>
</body>
DOM Tree:
Document
|
Body
|
Div
|
H1
This structure helps JavaScript easily find and manipulate elements.
How JavaScript Accesses HTML Elements
JavaScript can access HTML elements using DOM methods.
Some commonly used methods are:
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()
Example:
<h1 id="title">Hello</h1>
const heading = document.getElementById("title");
Now JavaScript can control this element.
What Can We Do Using DOM?
Using DOM, we can:
- Change text.
- Change images.
- Change CSS styles.
- Create new elements.
- Delete elements.
- Show or hide elements.
- Handle button clicks.
- Build interactive web applications.
What is an Event?
An Event is an action performed by the user or browser.
Examples:
- Clicking a button.
- Typing in an input box.
- Moving the mouse.
- Pressing a keyboard key.
- Loading a webpage.
Common events:
onclick
onmouseover
onkeydown
onchange
onsubmit
Example:
<button onclick="showMessage()">Click</button>
function showMessage() {
alert("Button Clicked");
}
When the user clicks the button, the function executes.
Events make webpages interactive.
Project 1: Bulb ON/OFF Project
What does this project do?
<body>
<div id="box">
<img id="bulb_img" src="https://www.w3schools.com/js/pic_bulboff.gif" alt="">
<button onclick="on()">ON</button>
<button onclick="off()">OFF</button>
</div>
<script>
const bulb = document.getElementById('bulb_img');
const back = document.getElementById('box')
function on() {
bulb.src= 'https://www.w3schools.com/js/pic_bulbon.gif';
back.style.backgroundColor='white';
}
function off() {
bulb.src= 'https://www.w3schools.com/js/pic_bulboff.gif';
back.style.backgroundColor='rgb(0, 0, 64)';
}
</script>
</body>
This project turns a bulb image ON and OFF when the user clicks buttons.
It also changes the background color.
How I built this project
First, I accessed the HTML elements using DOM.
const bulb = document.getElementById('bulb_img');
const back = document.getElementById('box');
When the user clicks the ON button:
function on() {
bulb.src = 'pic_bulbon.gif';
back.style.backgroundColor = 'white';
}
- The bulb image changes to ON.
- The background color changes to white.
When the user clicks the **OFF button:**
function off() {
bulb.src = 'pic_bulboff.gif';
back.style.backgroundColor = 'rgb(0, 0, 64)';
}
- The bulb image changes to OFF.
- The background color changes to dark blue.
This project helped me understand:
getElementById()- Event handling
- Changing image source
- Changing CSS styles using JavaScript
Project 2: Text Changing Project
What does this project do?
<body>
<div id="fullPage">
<div id="box">
<div id="textBox">
<h1 id="name">What is Your Name?</h1>
</div>
<button onclick="changeText()">Click</button>
</div>
</div>
<script>
const text = document.getElementById("name")
function changeText() {
if (text.innerText == "What is Your Name?") {
text.innerText = "Hi Vairavan"
} else {
text.innerText = "What is Your Name?";
}
}
</script>
</body>
This project changes the text when the button is clicked.
Initially, the text is:
What is Your Name?
After clicking the button, the text changes to:
Hi Vairavan
If the button is clicked again, the original text appears.
How I built this project
First, I accessed the heading element.
const text = document.getElementById("name");
Next, I used an event with a button.
<button onclick="changeText()">Click</button>
When the button is clicked, JavaScript checks the current text.
function changeText() {
if (text.innerText == "What is Your Name?") {
text.innerText = "Hi Vairavan";
} else {
text.innerText = "What is Your Name?";
}
}
This project helped me understand:
- Accessing elements using DOM.
- Using
innerText. - Using conditions (
if...else). - Handling click events.
Conclusion
- DOM is one of the most important concepts in JavaScript.
- It allows JavaScript to interact with HTML and CSS, making webpages dynamic and interactive.
- By learning DOM, we can create many real-world projects and improve our front-end development skills.
After learning DOM basics, I am planning to build more DOM projects.
In my next blog, I will share another DOM project and explain how I built it step by step.
Stay tuned for the next blog!👋
Top comments (0)