অধ্যায় ৪০: JavaScript DOM Manipulation (পরিচিতি ও বেসিক) — বাংলায়

এই অধ্যায়ে শিখবো DOM (D

ocument Object Model) কী, এবং JavaScript দিয়ে কিভাবে ওয়েবপেজের HTML এলিমেন্ট পরিবর্তন করা যায়।

---

১. DOM কী?

• DOM হলো ওয়েবপেজের HTML এর একটি অবজেক্ট রিপ্রেজেন্টেশন।

• ব্রাউজার HTML কে ট্রি স্ট্রাকচারে রূপান্তর করে যেটাকে DOM বলে।

• JavaScript দিয়ে DOM এর মাধ্যমে ওয়েবপেজের যেকোনো অংশ অ্যাক্সেস ও পরিবর্তন করা যায়।

---

২. DOM এ এলিমেন্ট সিলেক্ট করা

২.১ getElementById

const element = document.getElementById("myId");

২.২ getElementsByClassName

const elements = document.getElementsByClassName("myClass");

২.৩ querySelector (প্রথম ম্যাচ পাওয়া এলিমেন্ট)

const element = document.querySelector(".myClass");

২.৪ querySelectorAll (সব ম্যাচ পাওয়া এলিমেন্ট)

const elements = document.querySelectorAll("div.myClass");

---

৩. DOM এ এলিমেন্টের পরিবর্তন

৩.১ Text পরিবর্তন

const heading = document.getElementById("title");
heading.textContent = "নতুন শিরোনাম";

৩.২ HTML পরিবর্তন

const container = document.querySelector(".container");
container.innerHTML = "<p>নতুন প্যারাগ্রাফ</p>";

৩.৩ স্টাইল পরিবর্তন

const box = document.querySelector(".box");
box.style.backgroundColor = "yellow";
box.style.fontSize = "20px";

---

৪. DOM এ এলিমেন্ট যোগ ও মুছা

৪.১ নতুন এলিমেন্ট তৈরি ও যোগ করা

const newDiv = document.createElement("div");
newDiv.textContent = "আমি নতুন ডিভ!";
document.body.appendChild(newDiv);

৪.২ এলিমেন্ট মুছা

const oldDiv = document.getElementById("oldDiv");
oldDiv.remove();

---

৫. ইভেন্ট লিসনার যুক্ত করা

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("বাটন চাপা হয়েছে!");
});

---

সারাংশ

কাজ	কোড উদাহরণ
এলিমেন্ট সিলেক্ট	document.getElementById("id")
টেক্সট পরিবর্তন	element.textContent = "নতুন"
HTML পরিবর্তন	element.innerHTML = "<p>...</p>"
স্টাইল পরিবর্তন	element.style.color = "red"
নতুন এলিমেন্ট যোগ	document.createElement()
এলিমেন্ট মুছা	element.remove()
ইভেন্ট লিসনার যুক্ত	element.addEventListener()

---

এই অধ্যায় শেষে আপনি শিখলেন:

• DOM কী এবং কেন গুরুত্বপূর্ণ

• JavaScript দিয়ে DOM থেকে এলিমেন্ট নির্বাচন করা

• DOM এর মাধ্যমে টেক্সট, HTML, স্টাইল পরিবর্তন

• DOM এ নতুন এলিমেন্ট যোগ ও মুছে ফেলা

• ইভেন্ট লিসনার দিয়ে ইন্টারেক্টিভ কোড লেখা

---

পরবর্তী অধ্যায়:
অধ্যায় ৪১: JavaScript DOM Events (ইভেন্ট হ্যান্ডলিং বিস্তারিত)

লিখুন: “অধ্যায় ৪১ শুরু করো” — তাহলে শিখবো DOM ইভেন্টের ধরন ও হ্যান্ডলিং পদ্ধতি।