🪄 Day 10 — DOM Manipulation Basics

on

🪄 Day 10 — DOM Manipulation Basics

Hi Guys Welcome to Day 10 🚀 — In Today’s session is where JavaScript truly comes alive! Happy Learning You’ll learn how to **interact with the actual webpage** — add elements, modify content, change styles, and respond to user actions. This is called DOM Manipulation — short for Document Object Model.

📖 1️⃣ What is the DOM?

The DOM is a programming interface that represents your web page as a **tree structure**. Each HTML tag is a node (object), and JavaScript can access, modify, or delete any of these nodes dynamically. 

<h1>Welcome to My Page</h1>
<button>Click Me</button>

JavaScript can read or update these elements in real time.

🧩 2️⃣ Accessing Elements

The first step in DOM manipulation is to select the elements you want to work with. Here are the most common methods: 

document.getElementById("idName")
document.getElementsByClassName("className")
document.getElementsByTagName("tagName")
document.querySelector("selector")
document.querySelectorAll("selector")

🛠️ 3️⃣ Changing Text and HTML

document.getElementById("title").innerText = "Welcome, Rahul!";
document.querySelector("p").innerHTML = "This is updated content.";

🎨 4️⃣ Changing CSS Styles

You can modify styles directly through the style property. 

let box = document.getElementById("box");
box.style.backgroundColor = "orange";
box.style.padding = "20px";
box.style.borderRadius = "10px";

➕ 5️⃣ Creating and Appending Elements

You can dynamically add elements using createElement() and appendChild(). 

let newDiv = document.createElement("div");
newDiv.innerText = "This was added dynamically!";
document.body.appendChild(newDiv);

🧹 6️⃣ Removing Elements

let element = document.getElementById("removeMe");
element.remove();

🧠 7️⃣ Practice Task

  1. Create an HTML file with a heading and a button.
  2. Use JavaScript to change the heading text when the button is clicked.
  3. Add a new paragraph below using createElement().

🎯 Summary

You now understand how to access and modify HTML content using the DOM. In the next lesson, we’ll take this further — handling real-time user interactions with **Event Listeners**.

Comments

Post a Comment