JavaScript HTML DOM – পূর্ণাঙ্গ টিউটোরিয়াল (বাংলা)
DOM (Document Object Model) হলো একটি ওয়েব পেজের স্ট্রাকচার বা গাছের মত অবজেক্ট মডেল, যা ব্রাউজার তৈরি করে HTML ডকুমেন্ট থেকে।
JavaScript দিয়ে আমরা DOM এর মাধ্যমে ওয়েব পেজের উপাদানগুলোকে পড়তে, পরিবর্তন করতে, নতুন উপাদান যোগ বা মোছা করতে পারি।
১. DOM কীভাবে কাজ করে?
যখন কোনো HTML পেজ লোড হয়, ব্রাউজার সেটাকে DOM গাছ হিসেবে রূপান্তর করে। DOM গাছের প্রতিটি নোড একটি HTML এলিমেন্ট, অ্যাট্রিবিউট, অথবা টেক্সট হতে পারে।
JavaScript DOM API ব্যবহার করে আমরা এই নোডগুলোকে এক্সেস ও ম্যানিপুলেট করতে পারি।
২. DOM এর প্রধান কম্পোনেন্ট
| DOM Component | বর্ণনা |
|---|---|
| Document | পুরো ওয়েব পেজের রুট নোড, যেখানে থেকে সব এলিমেন্ট এক্সেস করা হয়। |
| Element | HTML এর একটি ট্যাগ যেমন <div>, <p>, <h1> ইত্যাদি। |
| Attribute | HTML এলিমেন্টের বিশেষ গুণাবলী যেমন id, class, style ইত্যাদি। |
| Text | HTML এলিমেন্টের মধ্যে থাকা টেক্সট কন্টেন্ট। |
৩. JavaScript দিয়ে DOM Element নির্বাচন
DOM থেকে এলিমেন্ট নির্বাচন করার জন্য বিভিন্ন মেথড রয়েছে:
document.getElementById(id)– একটি নির্দিষ্টidদিয়ে এলিমেন্ট নির্বাচন করে।document.getElementsByClassName(className)– একই ক্লাসের সব এলিমেন্ট নির্বাচন করে।document.getElementsByTagName(tagName)– ট্যাগ নাম দিয়ে এলিমেন্ট নির্বাচন।document.querySelector(selector)– CSS সিলেক্টর দিয়ে প্রথম এলিমেন্ট নির্বাচন।document.querySelectorAll(selector)– CSS সিলেক্টর দিয়ে সব মিল থাকা এলিমেন্ট নির্বাচন।
৪. DOM Element নির্বাচন ও ব্যবহারের উদাহরণ
<h1 id="title">আমার প্রথম ওয়েবপেজ</h1>
<p class="description">এটি JavaScript DOM উদাহরণ।</p>
<button id="btn">ক্লিক করুন</button>
<script>
// id দিয়ে এলিমেন্ট নির্বাচন
const title = document.getElementById("title");
console.log(title.innerText); // আউটপুট: আমার প্রথম ওয়েবপেজ
// class দিয়ে এলিমেন্ট নির্বাচন (এখানে একদম প্রথম এলিমেন্ট নেবে)
const desc = document.querySelector(".description");
console.log(desc.innerText); // আউটপুট: এটি JavaScript DOM উদাহরণ।
// button এলিমেন্ট নির্বাচন
const btn = document.getElementById("btn");
// বাটনে ক্লিক ইভেন্ট যোগ করা
btn.addEventListener("click", function() {
title.innerText = "আপনি বাটন ক্লিক করেছেন!";
desc.style.color = "red"; // প্যারাগ্রাফের রঙ লাল করা হলো
});
</script>
উপরের কোডে, আমরা <h1>, <p> ও <button> এলিমেন্ট নির্বাচন করেছি, এবং ক্লিক ইভেন্ট দিয়ে তাদের পরিবর্তন করেছি। innerText দিয়ে টেক্সট পরিবর্তন ও style দিয়ে CSS পরিবর্তন করা হয়েছে।
৫. DOM ম্যানিপুলেশন – নতুন এলিমেন্ট যোগ করা ও মোছা
JavaScript দিয়ে আমরা নতুন HTML এলিমেন্ট তৈরি করে DOM-এ যোগ করতে পারি এবং বিদ্যমান এলিমেন্ট মুছে ফেলতেও পারি।
const parent = document.getElementById("container");
// নতুন প্যারাগ্রাফ তৈরি
const newPara = document.createElement("p");
newPara.innerText = "আমি নতুন যোগ করা প্যারাগ্রাফ।";
newPara.style.color = "green";
// নতুন প্যারাগ্রাফ প্যারেন্টে যোগ করা
parent.appendChild(newPara);
// বিদ্যমান এলিমেন্ট মুছে ফেলা
const oldPara = document.getElementById("old");
if(oldPara){
parent.removeChild(oldPara);
}
৬. DOM ইভেন্টস কি?
DOM ইভেন্টস হলো ব্যবহারকারীর কোন কাজ বা ব্রাউজারের কোন অবস্থা, যেমন ক্লিক করা, মাউস মোড়ানো, পেজ লোড হওয়া ইত্যাদি। JavaScript দিয়ে আমরা ইভেন্ট লিসেনার ব্যবহার করে এসব ইভেন্টে রেসপন্স করতে পারি।
৭. ইভেন্ট লিসেনার যোগ করার উদাহরণ
const button = document.querySelector("#btn");
button.addEventListener("click", function() {
alert("বাটন ক্লিক হয়েছে!");
});
৮. DOM API এর কিছু গুরুত্বপূর্ণ মেথড ও প্রপার্টি
| মেথড / প্রপার্টি | ব্যাখ্যা |
|---|---|
document.getElementById() |
id দিয়ে একক এলিমেন্ট নির্বাচন করে। |
document.querySelector() |
প্রথম মিল পাওয়া CSS সিলেক্টর দ্বারা এলিমেন্ট নির্বাচন। |
element.innerText |
এলিমেন্টের টেক্সট কন্টেন্ট পড়া বা পরিবর্তন করা। |
element.style.property |
এলিমেন্টের ইনলাইন CSS পরিবর্তন। |
element.addEventListener() |
কোন ইভেন্টে রেসপন্স করার জন্য হ্যান্ডলার যোগ করা। |
document.createElement() |
নতুন DOM এলিমেন্ট তৈরি করা। |
parent.appendChild() |
নতুন এলিমেন্ট DOM এ যোগ করা। |
parent.removeChild() |
DOM থেকে এলিমেন্ট মুছে ফেলা। |