JavaScript HTML DOM Document (ডকুমেন্ট অবজেক্ট) টিউটোরিয়াল বাংলা
DOM (Document Object Model) এর মাধ্যমে আমরা JavaScript দিয়ে HTML ডকুমেন্টের প্রতিটি অংশ যেমনঃ elements, attributes, text ইত্যাদিকে এক্সেস করতে পারি।
এই document অবজেক্টটি হলো HTML ডকুমেন্টের একটি প্রধান এন্ট্রি পয়েন্ট। এর মাধ্যমে আমরা DOM এর বিভিন্ন মেথড ও প্রপার্টিজ ব্যবহার করে ওয়েব পেজ ম্যানিপুলেট করতে পারি।
১. document অবজেক্ট কী?
document হলো ব্রাউজার দ্বারা প্রদত্ত একটি প্রাক-নির্ধারিত অবজেক্ট, যা সম্পূর্ণ HTML ডকুমেন্টকে উপস্থাপন করে। আপনি চাইলে JavaScript দিয়ে এই document থেকে এলিমেন্ট খুঁজে বের করতে, তৈরি করতে, পরিবর্তন করতে এবং DOM এ বিভিন্ন কাজ করতে পারেন।
document.getElementById("demo").innerHTML = "Hello DOM!";
ব্যাখ্যা: এই লাইনে document অবজেক্টের মাধ্যমে HTML এলিমেন্টকে খুঁজে বের করে তার মধ্যে লেখা পরিবর্তন করা হয়েছে।
২. document অবজেক্টের গুরুত্বপূর্ণ প্রপার্টি ও মেথড
| প্রপার্টি/মেথড | ব্যাখ্যা |
|---|---|
document.title |
ওয়েব পেজের টাইটেল রিটার্ন করে অথবা সেট করে। |
document.URL |
বর্তমান পেজের URL রিটার্ন করে। |
document.body |
HTML ডকুমেন্টের <body> অংশকে রেফার করে। |
document.head |
<head> এলিমেন্ট রিটার্ন করে। |
document.getElementById() |
একটি নির্দিষ্ট id সহ এলিমেন্ট ফেরত দেয়। |
document.getElementsByClassName() |
একটি নির্দিষ্ট ক্লাস সহ সব এলিমেন্টের HTMLCollection দেয়। |
document.querySelector() |
CSS সিলেক্টরের সাথে মিলে এমন প্রথম এলিমেন্ট রিটার্ন করে। |
document.createElement() |
নতুন একটি HTML এলিমেন্ট তৈরি করে। |
৩. ডকুমেন্ট অবজেক্ট দিয়ে এলিমেন্ট তৈরি ও DOM এ যোগ
const para = document.createElement("p");
para.innerText = "নতুন একটি প্যারাগ্রাফ।";
document.body.appendChild(para);
ব্যাখ্যা: এখানে document.createElement() দিয়ে একটি প্যারাগ্রাফ তৈরি করা হয়েছে এবং পরে সেটিকে document.body তে যোগ করা হয়েছে।
৪. document.write() মেথড
এই মেথডটি HTML ডকুমেন্টে সরাসরি লেখা যোগ করতে ব্যবহার হয়। তবে এটা আধুনিক ওয়েব ডেভেলপমেন্টে কম ব্যবহৃত হয়।
document.write("এই লেখা পেজে সরাসরি যোগ করা হয়েছে।");
দ্রষ্টব্য: document.write() পেজ লোড হয়ে যাওয়ার পর ব্যবহার করলে পুরো ডকুমেন্ট রিসেট হয়ে যায়। তাই সতর্কভাবে ব্যবহার করুন।
৫. উপসংহার
document অবজেক্ট JavaScript DOM এর সবচেয়ে গুরুত্বপূর্ণ অংশ। এর সাহায্যে আমরা HTML এর প্রতিটি অংশের সাথে কাজ করতে পারি।
আপনি যদি ওয়েব পেজকে ডায়নামিক করতে চান, তাহলে এই DOM Document মেথডগুলো জানা আবশ্যক।