14. DOM Manipulation (Change Elements)
📘 কনসেপ্ট (থিওরি)
একবার HTML এলিমেন্ট সিলেক্ট করলে, আপনি এর কন্টেন্ট, অ্যাট্রিবিউট বা CSS স্টাইল পরিবর্তন করতে পারবেন।
**কন্টেন্ট পরিবর্তন:**
-
element.innerText = "New Text" — দৃশ্যমান টেক্সট পরিবর্তন করে
- element.innerHTML = "New HTML" — HTML কন্টেন্ট পরিবর্তন করে
**স্টাইল পরিবর্তন:**
- element.style.color = "red" — টেক্সট রঙ পরিবর্তন করে
- element.style.backgroundColor = "blue" — ব্যাকগ্রাউন্ড পরিবর্তন করে। দ্রষ্টব্য: CSS প্রপার্টিতে হাইফেন থাকলে তা জাভাস্ক্রিপ্টে camelCase হয়ে যায়।
**অ্যাট্রিবিউট পরিবর্তন:**
- element.setAttribute("src", "image.jpg")
- element.src = "image.jpg"💡 উদাহরণ
এলিমেন্ট পরিবর্তন করা (সিনট্যাক্স উদাহরণ):
// ধরুন HTML:
Old Text
const p = document.getElementById("demo"); // টেক্সট পরিবর্তন p.innerText = "Hello JavaScript!"; // স্টাইল পরিবর্তন p.style.color = "blue"; p.style.fontSize = "24px"; p.style.display = "none"; // এলিমেন্ট লুকিয়ে ফেলে🎯 আপনার কাজ (প্র্যাকটিস)
ধরুন আপনার কাছে
box নামের একটি এলিমেন্ট আছে। এর innerText পরিবর্তন করে "Updated" এবং backgroundColor পরিবর্তন করে "green" করার সিনট্যাক্স লিখুন।main.javascript
Loading...
OUTPUT
Run your code to see the output here...