JavaScript document.body এর বাংলা টিউটোরিয়াল
document.body হলো একটি DOM প্রপার্টি যা আমাদের <body> এলিমেন্টকে সরাসরি অ্যাক্সেস করার সুযোগ দেয়। এর মাধ্যমে আপনি ওয়েবপেজের মেইন কন্টেন্ট (যা <body> এর ভিতরে থাকে) এর সাথে সহজেই কাজ করতে পারেন।
১. document.body কী করে?
এটি সম্পূর্ণ <body> ট্যাগকে রেফারেন্স করে। আপনি চাইলে এর কন্টেন্ট পড়তে, পরিবর্তন করতে বা নতুন HTML যোগ করতে পারেন।
document.body.style.backgroundColor = "lightyellow";
ব্যাখ্যা: উপরের কোডটি দিয়ে আমরা পুরো <body> এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করেছি।
২. document.body এর ব্যবহারসমূহ
| ব্যবহার | ব্যাখ্যা |
|---|---|
document.body.innerHTML |
পুরো body এর HTML কনটেন্ট পড়ে বা সেট করে। |
document.body.style |
body এর CSS style অ্যাক্সেস ও পরিবর্তন করে। |
document.body.append() |
body এর শেষে নতুন element যোগ করে। |
৩. একটি পূর্ণ উদাহরণ
// body এর ভিতরে নতুন প্যারাগ্রাফ যোগ করা
let para = document.createElement("p");
para.textContent = "এই প্যারাগ্রাফটি JavaScript এর মাধ্যমে যোগ করা হয়েছে!";
document.body.append(para);
ফলাফল: নতুন একটি <p> এলিমেন্ট body এর নিচে যোগ হবে।
৪. সতর্কতা
কখনও কখনও document.body তখনও পাওয়া যায় না যদি DOM পুরোপুরি লোড না হয়। সে ক্ষেত্রে window.onload বা DOMContentLoaded ইভেন্ট ব্যবহার করা উচিত।
window.onload = function() {
document.body.style.backgroundColor = "lavender";
};
৫. উপসংহার
document.body হল একটি শক্তিশালী DOM রেফারেন্স যেটি দিয়ে আমরা সরাসরি HTML <body> এর কনটেন্ট ও স্টাইল নিয়ন্ত্রণ করতে পারি। এটি ওয়েব পেজ ম্যানিপুলেশনের ক্ষেত্রে অত্যন্ত গুরুত্বপূর্ণ।