JavaScript HTML DOM: HTML পরিবর্তন করার পূর্ণাঙ্গ টিউটোরিয়াল
HTML DOM (Document Object Model) হল একটি অবজেক্ট-ভিত্তিক কাঠামো যা HTML ডকুমেন্টের প্রতিটি এলিমেন্টকে একটি অবজেক্ট হিসেবে উপস্থাপন করে। JavaScript ব্যবহার করে এই DOM-এ অ্যাক্সেস এবং পরিবর্তন করা যায়। এই টিউটোরিয়ালে আমরা শিখব কিভাবে JavaScript দিয়ে HTML-এর বিভিন্ন অংশ পরিবর্তন করতে হয়।
HTML DOM দিয়ে কীভাবে HTML পরিবর্তন করা যায়?
HTML DOM দিয়ে আপনি পেজের কোনো এলিমেন্টের content, attribute, বা style পরিবর্তন করতে পারেন। মূলত JavaScript দিয়ে DOM এর মাধ্যমে HTML ডকুমেন্টের গঠন ও উপাদান নিয়ন্ত্রণ করা হয়।
প্রধান পদ্ধতিগুলো
innerHTML– কোনো এলিমেন্টের মধ্যে থাকা HTML বা টেক্সট কন্টেন্ট পরিবর্তন করতে ব্যবহৃত হয়।textContent– এলিমেন্টের শুধুমাত্র টেক্সট কন্টেন্ট পরিবর্তন করে, HTML ট্যাগকে ইগনোর করে।setAttribute()– এলিমেন্টের কোনো এট্রিবিউট পরিবর্তন বা সেট করতে ব্যবহৃত হয়।style– এলিমেন্টের CSS স্টাইল পরিবর্তন করতে ব্যবহার হয়।
innerHTML দিয়ে HTML কন্টেন্ট পরিবর্তন
innerHTML একটি এলিমেন্টের ভিতরে থাকা HTML কোডকে পড়তে ও পরিবর্তন করতে দেয়। এটি খুবই শক্তিশালী, কারণ আপনি শুধু টেক্সট নয়, নতুন HTML এলিমেন্টও ঢোকাতে পারেন।
<div id="demo">পুরোনো টেক্সট</div>
<script>
document.getElementById("demo").innerHTML = "<b>নতুন বোল্ড টেক্সট</b>";
</script>
এই কোডটি “demo” আইডির div এর ভিতরের HTML কে নতুন বোল্ড টেক্সটে পরিবর্তন করবে।
textContent দিয়ে শুধুমাত্র টেক্সট পরিবর্তন
textContent শুধুমাত্র টেক্সট কন্টেন্ট পরিবর্তন করে, HTML ট্যাগগুলোকে স্পর্শ করে না। যদি আপনি চান HTML ট্যাগগুলো প্রদর্শিত হোক না, তাহলে এটি ব্যবহার করবেন।
<div id="demo"><b>পুরোনো বোল্ড টেক্সট</b></div>
<script>
document.getElementById("demo").textContent = "এখন এটি টেক্সট হিসেবে দেখাবে, বোল্ড নয়";
</script>
setAttribute() দিয়ে এট্রিবিউট পরিবর্তন
আপনি DOM এলিমেন্টের কোনো এট্রিবিউট (যেমন: class, href, src ইত্যাদি) পরিবর্তন করতে setAttribute() ব্যবহার করতে পারেন।
<a id="link" href="https://example.com">পুরানো লিঙ্ক</a>
<script>
document.getElementById("link").setAttribute("href", "https://newsite.com");
document.getElementById("link").textContent = "নতুন লিঙ্ক";
</script>
এখানে লিঙ্কের URL এবং টেক্সট উভয়ই পরিবর্তন হয়েছে।
স্টাইল পরিবর্তনের মাধ্যমে HTML ডিজাইন নিয়ন্ত্রণ
JavaScript দিয়ে এলিমেন্টের CSS স্টাইল সরাসরি পরিবর্তন করা যায়। এটি এলিমেন্টের style প্রপার্টির মাধ্যমে হয়।
<div id="box" style="width:100px; height:100px; background:#3498db;"></div>
<script>
const box = document.getElementById("box");
box.style.backgroundColor = "#e74c3c"; // লাল রঙ হবে
box.style.width = "200px"; // প্রস্থ বাড়ানো
</script>
⚠️ সতর্কতা
innerHTMLব্যবহার করার সময় নিরাপত্তার খেয়াল রাখা জরুরি, কারণ এটি XSS (Cross-site scripting) আক্রমণের ঝুঁকি বাড়ায়। যেকোনো ইউজার ইনপুট সরাসরিinnerHTML-এ ব্যবহার করবেন না।textContentনিরাপদ কারণ এটি HTML ট্যাগ ইগনোর করে।- DOM পরিবর্তনের পর ব্রাউজার স্বয়ংক্রিয়ভাবে পেজ আপডেট করে।
✅ সারসংক্ষেপ
| মেথড/প্রপার্টি | কার্য | উদাহরণ |
|---|---|---|
innerHTML |
HTML বা টেক্সট কন্টেন্ট পরিবর্তন | element.innerHTML = “<b>নতুন</b>” |
textContent |
শুধুমাত্র টেক্সট পরিবর্তন (HTML ট্যাগ ইগনোর) | element.textContent = “নতুন টেক্সট” |
setAttribute() |
এট্রিবিউট পরিবর্তন বা সেট করা | element.setAttribute(“href”, “url”) |
style |
CSS স্টাইল পরিবর্তন | element.style.color = “red” |