DOM মানে Document Object Model। এটি একটি ট্রি-আকৃতির স্ট্রাকচার যা একটি HTML ডকুমেন্টের কনটেন্ট প্রতিনিধিত্ব করে।
একটি ওয়েবপেজ লোড হলে, ব্রাউজার আপনার HTML-কে একটি DOM ট্রি-তে রূপান্তর করে, যেখানে:
📌 সংক্ষেপে: জাভাস্ক্রিপ্ট আপনার ওয়েব পেজের সাথে ডাইনামিকভাবে ইন্টারঅ্যাক্ট করতে DOM ব্যবহার করে।
<html>
<body>
<h1>Hello</h1>
<p>This is a paragraph.</p>
</body>
</html>Document
└── html
└── body
├── h1
└── p| মেথড | বিবরণ |
|---|---|
getElementById() | ID দিয়ে এলিমেন্ট খুঁজে বের করে |
getElementsByClassName() | ক্লাসের নাম দিয়ে এলিমেন্ট খুঁজে বের করে |
getElementsByTagName() | ট্যাগ দিয়ে এলিমেন্ট খুঁজে বের করে |
querySelector() | প্রথম মিলে যাওয়া এলিমেন্ট খুঁজে বের করে (CSS) |
querySelectorAll() | সব মিলে যাওয়া এলিমেন্ট খুঁজে বের করে (CSS) |
<p id="demo" class="text">Hello!</p>document.getElementById("demo"); // ID দিয়ে
document.getElementsByClassName("text"); // ক্লাস দিয়ে
document.querySelector("p"); // প্রথম <p>
document.querySelectorAll("p"); // সব <p>একটি এলিমেন্টের ভেতরের HTML কনটেন্ট প্রতিস্থাপন করে।
document.getElementById("demo").innerHTML = "Updated!";শুধু টেক্সট পরিবর্তন করে (HTML ট্যাগ উপেক্ষা করে)।
document.getElementById("demo").textContent = "Plain Text";const box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.fontSize = "20px";const newP = document.createElement("p");
newP.textContent = "This is a new paragraph.";
document.body.appendChild(newP);const item = document.getElementById("removeMe");
item.remove();অথবা প্যারেন্ট এলিমেন্ট ব্যবহার করে:
item.parentNode.removeChild(item);আপনি DOM সিলেকশনকে ইভেন্টের সাথে একত্রে ব্যবহার করতে পারেন:
document.getElementById("btn").addEventListener("click", function () {
document.getElementById("demo").textContent = "Button clicked!";
});| প্রপার্টি | বিবরণ |
|---|---|
parentNode | প্যারেন্ট এলিমেন্ট অ্যাক্সেস করে |
children | সব চাইল্ড এলিমেন্ট অ্যাক্সেস করে |
firstElementChild | প্রথম চাইল্ড এলিমেন্ট |
lastElementChild | শেষ চাইল্ড এলিমেন্ট |
nextElementSibling | একই স্তরের পরবর্তী এলিমেন্ট |
previousElementSibling | একই স্তরের পূর্ববর্তী এলিমেন্ট |
const list = document.getElementById("myList");
console.log(list.children); // li এলিমেন্টের HTMLCollectionconst link = document.getElementById("myLink");
console.log(link.getAttribute("href")); // পাওয়া
link.setAttribute("href", "https://example.com"); // সেট করাconst box = document.querySelector(".box");
box.classList.add("active"); // ক্লাস যোগ করা
box.classList.remove("box"); // ক্লাস সরানো
box.classList.toggle("hidden"); // ক্লাস টগল করাinnerHTML ব্যবহার করে একটি হেডিংয়ের টেক্সট পরিবর্তন করুন।<li> আইটেম তৈরি করুন এবং একটি আনঅর্ডারড লিস্টে যোগ করুন।setTimeout() ব্যবহার করে কয়েক সেকেন্ড পর একটি এলিমেন্ট মুছে ফেলুন।src অ্যাট্রিবিউট ডাইনামিকভাবে পরিবর্তন করুন।