HTML <body> এলিমেন্টের সাথে যুক্ত HTML DOM body প্রোপার্টি <body> এলিমেন্টের প্রোপার্টি মান সেট বা রিটার্ন করতে ব্যবহৃত হয়। এটি <body> এলিমেন্ট রিটার্ন করে। এটি <body> এলিমেন্টের ভিতরের কন্টেন্ট পরিবর্তন করতে ব্যবহার করা যেতে পারে। এই প্রোপার্টি <body> এলিমেন্টের ভিতরে থাকা চাইল্ড এলিমেন্টের কন্টেন্ট ওভাররাইট করতে পারে।
সিনট্যাক্স
নিচে সিনট্যাক্স দেওয়া হলো:
body প্রোপার্টি সেট করা:
document.body = New_Content
এখানে, New_Content হলো এলিমেন্টের জন্য নতুন কন্টেন্ট।
উদাহরণ
HTML DOM Body প্রোপার্টির জন্য একটি উদাহরণ দেখি:
<!DOCTYPE html> <html> <body> <h2>Sample HEADING</h2> <p>Click the below button to overwrite child content</p> <button onclick="OverWrite()">Overwrite Content</button> <p>A sample paragraph</p> <script> function OverWrite() { document.body.innerHTML = "All the content inside the body tag is overwritten"; } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেবে:
「Overwrite Content」-এ ক্লিক করলে:
উপরের উদাহরণে:
আমাদের <body> এলিমেন্টের ভিতরে বিভিন্ন এলিমেন্ট আছে যেমন একটি <h2> এলিমেন্ট, দুটি <p> এলিমেন্ট এবং একটি বাটন। "Overwrite Content" বাটন OverWrite() ফাংশন এক্সিকিউট করে।
<button>Overwrite Content</button>
OverWrite() ফাংশন ডকুমেন্ট বডির innerHtml পায় এবং টেক্সটকে "All the content inside the body tag is overwritten"-এ পরিবর্তন করে। এটি বডির ভিতরের সকল কন্টেন্ট ওভাররাইট করে মূলত সকল এলিমেন্ট সরিয়ে শুধু টেক্সট প্রদর্শন করে।
function OverWrite() { document.body.innerHTML = "All the content inside the body tag is overwritten"; }
