JavaScript এর হাতেখড়ি (পর্ব – ১০)

JavaScript Part 10

আগের পর্বে আমরা DOM থেকে এলিমেন্ট খুঁজে বের করা (select) শিখেছি। কিন্তু শুধু খুঁজে বের করলেই তো হবে না — সেটাকে বদলাতেও হবে। আজকে শিখবো DOM Manipulation — সিলেক্ট করা এলিমেন্টের কন্টেন্ট, স্টাইল, ও ক্লাস কীভাবে JavaScript দিয়ে বদলানো যায়।

টেক্সট বদলানো — textContent

একটা এলিমেন্টের ভেতরের টেক্সট পড়তে বা বদলাতে textContent ব্যবহার হয়:

<h1 id="title">পুরনো টাইটেল</h1>

<script>
  const heading = document.getElementById("title");

  console.log(heading.textContent); // পুরনো টাইটেল (পড়া)

  heading.textContent = "নতুন টাইটেল"; // বদলানো
</script>

এই কোড চালানোর সাথে সাথে পেজে "পুরনো টাইটেল" বদলে "নতুন টাইটেল" হয়ে যাবে — কোনো পেজ রিলোড ছাড়াই।

HTML বদলানো — innerHTML

textContent শুধু plain টেক্সট বসায়, কিন্তু innerHTML দিয়ে HTML ট্যাগসহ কন্টেন্ট বসানো যায়:

<div id="box">পুরনো কন্টেন্ট</div>

<script>
  const box = document.getElementById("box");
  box.innerHTML = "<strong>বোল্ড</strong> ও <em>ইটালিক</em> টেক্সট";
</script>
Property কাজ
textContent শুধু plain টেক্সট বসায়/পড়ে, HTML ট্যাগ থাকলে সেটাও টেক্সট হিসেবে দেখাবে
innerHTML HTML ট্যাগসহ কন্টেন্ট বসায়/পড়ে, ট্যাগ থাকলে সেটা রেন্ডার হবে

টিপস: যেখানে শুধু plain টেক্সট বসাতে হবে, সেখানে textContent ব্যবহার করাই নিরাপদ। ইউজারের ইনপুট (যেমন কোনো ফর্মের মান) কখনো সরাসরি innerHTML-এ বসানো ঠিক না — এতে ক্ষতিকর কোড ইনজেক্ট হওয়ার সুযোগ থাকে (একে বলে XSS)। innerHTML শুধু তখনই ব্যবহার করো যখন সত্যিই HTML ট্যাগ বসানোর দরকার আছে এবং তুমি জানো কন্টেন্টটা নিরাপদ।

স্টাইল বদলানো — .style

কোনো এলিমেন্টের CSS সরাসরি JavaScript দিয়ে বদলানো যায়:

const box = document.getElementById("box");

box.style.backgroundColor = "yellow";
box.style.color = "red";
box.style.padding = "20px";
box.style.borderRadius = "8px";

লক্ষ করো — CSS-এ background-color (হাইফেন সহ) লেখা হলেও, JavaScript-এ এটা backgroundColor (camelCase) হয়ে যায় — কারণ JavaScript-এ হাইফেন বিশেষ অর্থ বহন করে (বিয়োগ হিসেবে ধরে নেয়)। একইভাবে border-radius হয়ে যায় borderRadius।

টিপস: একাধিক স্টাইল প্রপার্টি একে একে .style দিয়ে বদলানোর চেয়ে, সাধারণত CSS-এ আগে থেকে একটা class বানিয়ে রেখে JavaScript দিয়ে সেই class add/remove করা বেশি পরিষ্কার অভ্যাস — এটাই এখন দেখবো।

Class যোগ/বাদ দেওয়া — classList

একাধিক CSS property একসাথে বদলাতে চাইলে, CSS-এ একটা class লিখে রেখে JavaScript দিয়ে শুধু সেই class toggle করাই সবচেয়ে ভালো পদ্ধতি:

<style>
  .highlight {
    background: yellow;
    padding: 10px;
    border-radius: 8px;
  }
</style>

<div id="box">আমাকে হাইলাইট করো</div>

<script>
  const box = document.getElementById("box");

  box.classList.add("highlight");    // class যোগ করা
  box.classList.remove("highlight"); // class বাদ দেওয়া
  box.classList.toggle("highlight"); // থাকলে বাদ, না থাকলে যোগ
</script>
Method কাজ
.add("class") class যোগ করে
.remove("class") class বাদ দেয়
.toggle("class") থাকলে বাদ দেয়, না থাকলে যোগ করে — চালু/বন্ধ সুইচের মতো
.contains("class") সেই class আছে কিনা true/false দিয়ে বলে

টিপস: .toggle() খুবই কাজে লাগে dark mode বাটন, dropdown menu খোলা/বন্ধ করা, বা মোবাইল মেনু show/hide করার মতো কাজে — CSS পর্ব ১১-এ আমরা যে dark mode-এর কথা বলেছিলাম, সেই class টগল করার কাজটা এভাবেই হয়।

Attribute বদলানো

src, href-এর মতো এলিমেন্টের attribute পড়তে/বদলাতে getAttribute() ও setAttribute() ব্যবহার হয়:

<img id="photo" src="old.jpg" alt="ছবি">

<script>
  const photo = document.getElementById("photo");

  console.log(photo.getAttribute("src")); // old.jpg

  photo.setAttribute("src", "new.jpg"); // ছবি বদলে যাবে
</script>

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>DOM Manipulation উদাহরণ</title>
  <style>
    .active {
      background: #3949ab;
      color: white;
      padding: 10px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1 id="title">পুরনো টাইটেল</h1>
  <div id="box">সাধারণ বক্স</div>

  <script>
    const heading = document.getElementById("title");
    heading.textContent = "নতুন টাইটেল — JavaScript দিয়ে বদলানো";

    const box = document.getElementById("box");
    box.classList.add("active");
    box.textContent = "এখন আমি স্টাইল করা!";
  </script>
</body>
</html>

এই কোড চালানোর সাথে সাথে পেজে দুটো পরিবর্তন দেখা যাবে — heading-এর টেক্সট বদলে যাবে, আর box-টা .active class পেয়ে নতুন স্টাইল আর টেক্সট নিয়ে দেখাবে।

নিজে চেষ্টা করো

Exercise:

  1. textContent দিয়ে একটা heading-এর লেখা বদলাও
  2. CSS-এ একটা class বানাও (রঙ, padding সহ), তারপর JavaScript দিয়ে সেটা classList.add() দিয়ে কোনো এলিমেন্টে যোগ করো
  3. classList.toggle() ব্যবহার করে চেষ্টা করো — একই কোড দুইবার চালালে কী হয় লক্ষ করো
  4. একটা ছবির src attribute setAttribute() দিয়ে বদলাও

পরের পর্বে যা থাকছে

পর্ব ১১-এ আমরা শিখবো Event Handling — addEventListener দিয়ে ইউজারের ক্লিক, টাইপিং, বা সাবমিটের মতো অ্যাকশন ধরে সেই অনুযায়ী কোড চালানো, উদাহরণসহ — এখান থেকেই আমরা DOM Selection আর Manipulation একসাথে ব্যবহার করে সত্যিকারের ইন্টারঅ্যাক্টিভ ফিচার বানানো শুরু করবো।

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম