🚀 JavaScript powers the web, but do you truly understand how it interacts with HTML?
The Document Object Model (DOM) is the key to manipulating web pages dynamically.
What is the DOM?
The DOM (Document Object Model) represents an HTML document as a tree structure, where each element is a node that JavaScript can manipulate.
Selecting Elements in the DOM
Before modifying elements, you need to select them. Here are a few ways:
document.getElementById("title");
document.querySelector(".btn");
document.querySelectorAll("p");
Modifying Content & Styles
Want to change text or update styles dynamically? JavaScript makes it easy!
const title = document.getElementById("title");
title.textContent = "Hello, DOM!";
title.style.color = "blue";
Handling Events (Click, Input, etc.)
Interactivity is what makes web apps dynamic! Use event listeners to respond to user actions.
const btn = document.querySelector(".btn");
btn.addEventListener("click", () => {
alert("Button clicked! 🚀");
});
Common Event Types
🛠️ Events let your app respond to user actions. Some key ones include:
click – User clicks an element
mouseover – Mouse hovers over
keydown – A key is pressed
input – User types in a field
Event Delegation (Best Practice!)
Instead of adding event listeners to every button, use event delegation for efficiency.
document.querySelector(".parent").addEventListener("click", (e) => {
if (e.target.matches(".child-btn")) {
alert("Child button clicked!");
}
});
Why Event Delegation?
✅ Improves performance
✅ Works for dynamically added elements
Removing Event Listeners
To improve performance, remove listeners when they’re no longer needed.
const handler = () => alert("Clicked!");
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);
Final Thoughts
The DOM & Event Handling are fundamental to modern JavaScript development. Mastering them gives you full control over your web pages.
💡 Have you used event delegation before? Let’s discuss in the comments!👇
🔁 Share this to help others master JavaScript! 🚀
Top comments (0)