JavaScript এর document.documentElement নিয়ে সম্পূর্ণ বাংলা টিউটোরিয়াল
JavaScript একটি ওয়েবপেজের বিভিন্ন অংশের সাথে কাজ করার জন্য অসাধারণ ক্ষমতা রাখে। এই টিউটোরিয়ালে আমরা শিখবো document.documentElement সম্পর্কে বিস্তারিতভাবে। এটি কীভাবে কাজ করে, কেন ব্যবহৃত হয়, এবং এর ব্যবহারিক উদাহরণ।
document.documentElement কি?
এটি JavaScript এর একটি প্রপার্টি যা পুরো HTML ডকুমেন্টের root element (অর্থাৎ <html> ট্যাগ) কে নির্দেশ করে। এটি DOM (Document Object Model) এর অংশ।
উদাহরণ:
console.log(document.documentElement);উপরে কোডটি চালালে আপনি সম্পূর্ণ HTML ডকুমেন্টের <html> এলিমেন্টটি দেখতে পাবেন।
কখন ব্যবহার হয়?
আপনি যদি কোনো স্ক্রিপ্টে পুরো HTML ডকুমেন্টের স্টাইল, ক্লাস, স্ক্রল, বা অন্যান্য property নিয়ন্ত্রণ করতে চান, তখন document.documentElement ব্যবহার করেন। উদাহরণস্বরূপ, পেজের scroll position পাওয়া বা সেট করার সময়।
স্ক্রল টেস্ট:
document.documentElement.scrollTop = 100;এটি পেজটিকে ১০০ পিক্সেল উপরে স্ক্রল করবে।
⚙️ ব্যবহারিক প্রয়োগ
| ব্যবহার | উদাহরণ |
|---|---|
| Scroll position জানার জন্য | document.documentElement.scrollTop |
| Class যোগ করতে | document.documentElement.classList.add('dark-mode') |
| Style পরিবর্তন করতে | document.documentElement.style.backgroundColor = 'black' |
⚠️ সতর্কতা
- সঠিকভাবে DOM লোড না হলে,
document.documentElementNull হতে পারে। তাই সবসময় নিশ্চিত হন যে DOMContentLoaded ইভেন্টের পর স্ক্রিপ্ট রান হচ্ছে।
উদাহরণ: DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.color = 'blue';
});
✅ সারসংক্ষেপ
document.documentElementহল মূলত HTML রুট এলিমেন্ট।- এটি
<html>ট্যাগকে নির্দেশ করে। - স্টাইল, ক্লাস, scrollTop প্রভৃতি কাজের জন্য এটি খুবই দরকারী।