অধ্যায় ২৭: JavaScript DOM Manipulation - উন্নত কৌশল (বাংলায়)

 

এই অধ্যায়ে শিখবো কিভাবে DOM (Document Object Model) এর মাধ্যমে ওয়েবপেজের এলিমেন্টগুলো আরও উন্নত ও ডাইনামিকভাবে নিয়ন্ত্রণ করতে হয়।

---

১. DOM Manipulation কি?

DOM হলো ওয়েবপেজের HTML উপাদানগুলোর গাছের মত একটি স্ট্রাকচার। JavaScript দিয়ে আমরা এই DOM এর এলিমেন্টগুলোকে পরিবর্তন, যোগ, মুছে দিতে পারি।

---

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

// নতুন প্যারাগ্রাফ তৈরি
let p = document.createElement('p');
p.textContent = "এইটি নতুন প্যারাগ্রাফ।";

// প্যারাগ্রাফকে বডির শেষে যোগ করা
document.body.appendChild(p);

---

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

let elem = document.getElementById('oldElem');
elem.parentNode.removeChild(elem);

---

৪. এলিমেন্টের মধ্যে ইনসার্ট করা (insertBefore)

let newElem = document.createElement('div');
newElem.textContent = "নতুন ডিভ";

let parent = document.getElementById('parent');
let reference = document.getElementById('child');

parent.insertBefore(newElem, reference);

---

৫. ক্লাস যোগ/মুছে ফেলা

let box = document.querySelector('.box');

// ক্লাস যোগ করা
box.classList.add('active');

// ক্লাস মুছে ফেলা
box.classList.remove('active');

// ক্লাস টগল (যদি থাকে মুছে ফেলবে, না থাকলে যোগ করবে)
box.classList.toggle('active');

---

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

let heading = document.querySelector('h1');
heading.style.color = 'red';
heading.style.fontSize = '30px';

---

৭. DOM এ অ্যাট্রিবিউট যোগ/পড়া/মুছে ফেলা

let link = document.querySelector('a');

// অ্যাট্রিবিউট যোগ করা
link.setAttribute('href', 'https://google.com');

// অ্যাট্রিবিউট পড়া
let href = link.getAttribute('href');
console.log(href);

// অ্যাট্রিবিউট মুছে ফেলা
link.removeAttribute('title');

---

৮. উদাহরণ: একটি টাস্ক লিস্ট অ্যাপ

<input type="text" id="taskInput" placeholder="নতুন টাস্ক">
<button id="addBtn">যোগ করুন</button>
<ul id="taskList"></ul>

<script>
  const input = document.getElementById('taskInput');
  const btn = document.getElementById('addBtn');
  const list = document.getElementById('taskList');

  btn.addEventListener('click', function() {
    let task = input.value.trim();
    if(task === '') return;

    let li = document.createElement('li');
    li.textContent = task;

    // ক্লিক করলে টাস্ক মুছে যাবে
    li.addEventListener('click', function() {
      list.removeChild(li);
    });

    list.appendChild(li);
    input.value = '';
  });
</script>

---

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

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

• এলিমেন্ট মুছে ফেলা ও ইনসার্ট করা

• ক্লাস ও স্টাইল নিয়ন্ত্রণ

• অ্যাট্রিবিউট ম্যানেজমেন্ট

• একটি ছোট প্র্যাকটিস প্রোজেক্ট তৈরি

---

পরবর্তী অধ্যায়:
অধ্যায় ২৮: JavaScript Event Bubbling ও Capturing

লিখুন: “অধ্যায় ২৮ শুরু করো” — তাহলে শিখবো ইভেন্ট ববলিং ও ক্যাপচারিং সম্পর্কে বিস্তারিত।