️ JavaScript HTML DOM Manipulation – বাংলা টিউটোরিয়াল
DOM Manipulation হচ্ছে JavaScript এর মাধ্যমে HTML ডকুমেন্টের যেকোনো অংশ পরিবর্তন, আপডেট বা নতুন কিছু যুক্ত করার প্রক্রিয়া। আপনি চাইলে JavaScript ব্যবহার করে সরাসরি HTML content, attribute, style এমনকি নতুন এলিমেন্টও তৈরি করে ডকুমেন্টে অ্যাড করতে পারেন।
DOM কিভাবে Manipulate করা যায়?
DOM Manipulation-এর জন্য সাধারণত ৩টি বিষয় ব্যবহৃত হয়:
- Content Change: কোন এলিমেন্টের ভেতরের লেখা বা HTML পরিবর্তন করা
- Style Change: CSS স্টাইল ডাইনামিকভাবে পরিবর্তন করা
- Attribute Change: HTML অ্যাট্রিবিউট যেমন id, class, src পরিবর্তন
উদাহরণ: Content Manipulation
নিচের উদাহরণে একটি <p> ট্যাগে লেখা JavaScript দিয়ে পরিবর্তন করা হচ্ছে:
<p id="text">এটা পুরনো লেখা।</p>
document.getElementById(“text”).innerHTML = “এই লেখা এখন পরিবর্তন হয়েছে!”;
</script>
ব্যাখ্যা: এখানে innerHTML ব্যবহার করে <p> ট্যাগের ভেতরের HTML কনটেন্ট পরিবর্তন করা হয়েছে।
উদাহরণ: CSS Style Manipulation
JavaScript দিয়ে আপনি DOM এলিমেন্টের স্টাইল সরাসরি পরিবর্তন করতে পারেন:
<div id="box" style="width:100px; height:100px; background:red;"></div>
document.getElementById(“box”).style.backgroundColor = “green”;
document.getElementById(“box”).style.borderRadius = “10px”;
</script>
ব্যাখ্যা: এখানে style প্রপার্টি ব্যবহার করে backgroundColor এবং borderRadius পরিবর্তন করা হয়েছে।
উদাহরণ: Attribute Manipulation
JavaScript ব্যবহার করে একটি ইমেজের src পরিবর্তন করা:
<img id="myImg" src="old.jpg" width="200">
document.getElementById(“myImg”).src = “new.jpg”;
</script>
ব্যাখ্যা: src অ্যাট্রিবিউটটি সরাসরি পরিবর্তন করে নতুন ছবি লোড করা হয়েছে।
➕ নতুন এলিমেন্ট DOM-এ যোগ করা
আপনি চাইলে DOM-এ নতুন HTML এলিমেন্টও অ্যাড করতে পারেন:
<div id="container"></div>
let newPara = document.createElement(“p”);
newPara.textContent = “আমি নতুন একটি প্যারাগ্রাফ!”;
document.getElementById(“container”).appendChild(newPara);
</script>
ব্যাখ্যা: এখানে প্রথমে একটি নতুন <p> তৈরি করা হয়েছে এবং পরে সেটা container div-এর মধ্যে যুক্ত করা হয়েছে।
উপসংহার
JavaScript DOM Manipulation হচ্ছে ওয়েব ডেভেলপমেন্টের সবচেয়ে গুরুত্বপূর্ণ টপিকগুলোর একটি। এর মাধ্যমে আপনি ওয়েব পেজের যেকোনো অংশ পরিবর্তন, স্টাইল, কন্টেন্ট ও অ্যাট্রিবিউট নিয়ন্ত্রণ করতে পারেন। এটি ডায়নামিক ওয়েবসাইট বানানোর মূল চাবিকাঠি।
এই স্কিলটি জানলে আপনি ইন্টার্যাকটিভ ফর্ম, রিয়েল টাইম ফিডব্যাক, থিম পরিবর্তন, ইউজার ইন্টারফেস কাস্টমাইজেশন ইত্যাদি অসংখ্য সুবিধা পাবেন।