Day 5 : DOM Manipulation in JavaScript
Here’s a clean non-bullet, blog-friendly “About Me” for your Hashnode page: I’m a Frontend Developer based in Pune with experience in Angular, TypeScript, JavaScript, HTML, and CSS. I enjoy building clean, scalable interfaces and working on products like dashboards, ERP systems, and B2B platforms. My focus is on writing maintainable code, improving performance, and creating user-friendly experiences. I also explore concepts around UI architecture, component patterns, and frontend best practices, which I document and share through my blogs. My goal is to create helpful, practical content for developers who are learning and building real-world projects.
OM stands for Document Object Model.
The browser converts HTML into a tree-like structure, and JavaScript can read, update, create, or delete elements from this tree.
Understanding DOM manipulation is important for every frontend developer before moving to frameworks like Angular.
What is the DOM?
The DOM represents the webpage as a tree of nodes.
Each HTML element becomes a JavaScript object.
JavaScript can select and modify these objects.
Example representation:
Document
┗━ <body>
┗━ <div>
┗━ <p>
Selecting Elements
document.getElementById("title");
document.querySelector(".btn");
document.querySelectorAll("p");
Console Example
console.log(document.getElementById("title"));
Changing Text Content
const title = document.getElementById("title");
title.textContent = "Updated Title";
Console Example
document.getElementById("title").textContent = "Hello from Console";
Changing Styles
title.style.color = "purple";
title.style.fontSize = "24px";
Console Example
document.body.style.background = "lightyellow";
Changing Attributes
const img = document.querySelector("img");
img.src = "new-image.jpg";
img.alt = "Updated Image";
Console Example
document.querySelector("img").src = "https://picsum.photos/200";
Creating Elements
const li = document.createElement("li");
li.textContent = "New Item Added";
document.body.appendChild(li);
Console Example
const p = document.createElement("p");
p.textContent = "This paragraph was created from the console.";
document.body.appendChild(p);
Removing Elements
const box = document.getElementById("box");
box.remove();
Console Example
document.querySelector("p").remove();
Event Listeners
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
console.log("Button clicked");
});
Practical Tasks
Below are tasks you can directly try in your HTML file + console.
1. Change Page Title on Button Click
HTML
<h1 id="title">Welcome</h1>
<button id="btn">Change Title</button>
JavaScript
const title = document.getElementById("title");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
title.textContent = "Hello Adiba";
});
2. Highlight Product Price
const price = document.querySelector(".price");
price.style.color = "green";
price.style.fontSize = "20px";
3. Update Product Image on Hover
HTML
<img id="productImg" src="image1.jpg" width="200">
JavaScript
const img = document.getElementById("productImg");
img.addEventListener("mouseover", () => {
img.src = "image2.jpg";
});
img.addEventListener("mouseout", () => {
img.src = "image1.jpg";
});
4. Add New Item to a List
HTML
<ul id="list"></ul>
<button id="addBtn">Add Item</button>
JavaScript
const list = document.getElementById("list");
const addBtn = document.getElementById("addBtn");
addBtn.addEventListener("click", () => {
const li = document.createElement("li");
li.textContent = "New Product Added";
list.appendChild(li);
});
5. Remove a Card on Button Click
HTML
<div class="card">
<p>Card Content</p>
<button class="delete">Delete</button>
</div>
JavaScript
const del = document.querySelector(".delete");
del.addEventListener("click", () => {
del.parentElement.remove();
});
6. Live Preview While Typing
HTML
<input id="nameInput" placeholder="Type something..." />
<p id="preview"></p>
JavaScript
const input = document.getElementById("nameInput");
const preview = document.getElementById("preview");
input.addEventListener("input", () => {
preview.textContent = input.value;
});
Understanding DOM manipulation gives you direct control over how webpages behave, and this skill prepares you for building dynamic interfaces in frameworks like Angular.