DOM Manipulation in JavaScript – Step by Step Guide

#javascript #frontend #dom #tutorial

🚀 DOM Manipulation in JavaScript – Step by Step Guide

If you’re learning JavaScript, DOM Manipulation is one of the most important skills you must understand.

In this article, we’ll learn:

What the DOM is
How to select elements
How to change content and styles
How to handle events
How to create and remove elements

Everything with simple examples 👇

🧠 What is the DOM?

DOM stands for Document Object Model.

When a web page loads, the browser converts HTML into a tree-like structure that JavaScript can access and modify.

JavaScript uses the DOM to read, change, add, or remove elements on a web page.

🧩 Sample HTML

<!DOCTYPE html>
<html>
<head>
  <title>DOM Manipulation</title>
</head>
<body>

  <h1 id="title">Hello DOM</h1>
  <p class="description">Learning DOM manipulation</p>

  <button id="btn">Click Me</button>

  <script src="script.js"></script>
</body>
</html>

🔍 Step 1: Selecting DOM Elements

1️⃣ Select by ID

const title = document.getElementById("title");
console.log(title);

2️⃣ Select by Class

const desc = document.getElementsByClassName("description");
console.log(desc[0]);

3️⃣ Select using CSS Selectors (Recommended)

const heading = document.querySelector("#title");
const paragraph = document.querySelector(".description");

✏️ Step 2: Changing Text Content

You can change the text inside elements using textContent or innerHTML.

heading.textContent = "DOM is Awesome!";
heading.innerHTML = "<span>DOM is Powerful!</span>";

🎨 Step 3: Changing Styles

You can also change the style of elements dynamically.

heading.style.color = "blue";
heading.style.fontSize = "32px";

Or use CSS classes:

.highlight {
  color: red;
  background: yellow;
}

heading.classList.add("highlight");

🖱️ Step 4: Handling Events

You can respond to user actions like clicks.

const button = document.querySelector("#btn");

button.addEventListener("click", () => {
  alert("Button clicked!");
  heading.textContent = "You clicked the button!";
});

➕ Step 5: Creating New Elements

Create and insert new elements into the DOM.

const newParagraph = document.createElement("p");
newParagraph.textContent = "This paragraph was created using JavaScript";

document.body.appendChild(newParagraph);

❌ Step 6: Removing Elements

Remove elements from the DOM when needed.

newParagraph.remove();

🔄 Step 7: Full Mini Example

Here’s a full working example:

button.addEventListener("click", () => {
  const item = document.createElement("li");
  item.textContent = "New Item Added";
  document.body.appendChild(item);
});