Whenever you click a button, submit a form, or display dynamic data on a webpage — you’re interacting with the DOM (Document Object Model). DOM manipulation is a core part of front-end development, and every web developer must understand how to read and update the DOM using JavaScript. In this blog, we’ll explore the basics of DOM manipulation with easy-to-follow examples.
🧠 What is the DOM?
The DOM is a tree-like structure representing the contents of an HTML document. Every element — like <div>, <p>, or <h1> — is a node in this tree.
Think of the DOM as a live blueprint of your webpage that JavaScript can access and change in real-time.
🔍 Selecting Elements in the DOM
✅ getElementById
javascriptCopyEditconst heading = document.getElementById("main-heading");
✅ querySelector and querySelectorAll
javascriptCopyEditconst firstButton = document.querySelector(".btn"); // selects first .btn
const allButtons = document.querySelectorAll(".btn"); // selects all .btn
✍️ Changing Text and HTML Content
➕ innerText – change visible text
javascriptCopyEditdocument.getElementById("title").innerText = "Welcome to CodeyNest!";
➕ innerHTML – insert HTML code
javascriptCopyEditdocument.getElementById("box").innerHTML = "<strong>Bold Text</strong>";
🎨 Changing CSS Styles with JavaScript
javascriptCopyEditconst box = document.querySelector("#box");
box.style.backgroundColor = "lightblue";
box.style.fontSize = "18px";
🎯 Adding Event Listeners
javascriptCopyEditconst button = document.getElementById("clickMe");
button.addEventListener("click", () => {
alert("Button clicked!");
});
🧱 Creating & Appending Elements
javascriptCopyEditconst newPara = document.createElement("p");
newPara.innerText = "I was added using JavaScript!";
document.body.appendChild(newPara);
🧹 Removing Elements
javascriptCopyEditconst element = document.getElementById("toRemove");
element.remove(); // removes it from DOM
💡 Real-World Use Cases
| Task | Involves DOM Manipulation |
|---|---|
| Toggle dark/light mode | ✅ |
| Live character counter | ✅ |
| Dropdown menu functionality | ✅ |
| Form validation messages | ✅ |
Conclusion:
DOM manipulation is what makes your web page interactive and alive. With just a few lines of JavaScript, you can respond to user actions, update content, and even create entire interfaces dynamically.
🔧 Tip: Practice by building a to-do list or image gallery where items are added/removed via DOM manipulation.