অধ্যায় ১৯: JavaScript DOM Manipulation (বাংলায়)

এই অধ্যায়ে শিখবো DOM (Document Object Model) কী এবং কিভাবে JavaScript দিয়ে ওয়েবপেজের উপাদানগুলোকে (elements) নিয়ন্ত্রণ বা পরিবর্তন করা যায়।

---

১. DOM কী?

DOM হলো ওয়েবপেজের একটা ট্রি-স্ট্রাকচার যা HTML এলিমেন্টগুলোকে প্রোগ্রামেটিকলি অ্যাক্সেস এবং পরিবর্তন করার সুযোগ দেয়।

---

২. DOM এলিমেন্ট নির্বাচন (Selecting Elements)

(ক) getElementById

let elem = document.getElementById('myId');

(খ) getElementsByClassName

let elems = document.getElementsByClassName('myClass'); // HTMLCollection (লিস্ট)

(গ) getElementsByTagName

let elems = document.getElementsByTagName('p');

(ঘ) querySelector (প্রথম ম্যাচিং এলিমেন্ট)

let elem = document.querySelector('.myClass');

(ঙ) querySelectorAll (সব ম্যাচিং এলিমেন্ট)

let elems = document.querySelectorAll('div.note');

---

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

(ক) টেক্সট পরিবর্তন

elem.textContent = "নতুন টেক্সট";

(খ) HTML পরিবর্তন

elem.innerHTML = "<b>বোল্ড টেক্সট</b>";

(গ) স্টাইল পরিবর্তন

elem.style.color = "red";
elem.style.fontSize = "20px";

---

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

let newPara = document.createElement('p');
newPara.textContent = "আমি নতুন প্যারাগ্রাফ";

document.body.appendChild(newPara);

---

৫. DOM থেকে এলিমেন্ট মুছে ফেলা

let elem = document.getElementById('myId');
elem.remove();

---

৬. উদাহরণ: বাটনে ক্লিক করলে প্যারাগ্রাফের রঙ পরিবর্তন

<p id="para">এই টেক্সটের রঙ পরিবর্তন হবে</p>
<button id="btn">রঙ পরিবর্তন করো</button>

<script>
  let para = document.getElementById('para');
  let btn = document.getElementById('btn');

  btn.addEventListener('click', function() {
    para.style.color = 'blue';
  });
</script>

---

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

• DOM কী ও কেন দরকার

• HTML এলিমেন্ট সিলেক্ট করা

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

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

• এলিমেন্ট মুছে ফেলা

---

পরবর্তী অধ্যায়:
অধ্যায় ২০: JavaScript এরে (Arrays) ও লুপ

লিখুন: “অধ্যায় ২০ শুরু করো” — তাহলে আমরা অ্যারে এবং তাদের সাথে লুপ কিভাবে ব্যবহার করতে হয় শিখবো।