JavaScript – HTML DOM Methods বাংলা টিউটোরিয়াল
DOM Methods হলো JavaScript এর মাধ্যমে HTML ডকুমেন্টে থাকা উপাদানগুলোকে এক্সেস, পরিবর্তন এবং ম্যানিপুলেট করার জন্য ব্যবহৃত বিভিন্ন ফাংশন।
এগুলো দিয়ে আমরা ওয়েব পেজের উপাদান যোগ, মুছে ফেলা, পরিবর্তন এবং নেভিগেট করতে পারি।
১. জনপ্রিয় DOM Methods ও তাদের ব্যবহার
| মেথডের নাম | বর্ণনা | উদাহরণ |
|---|---|---|
getElementById() |
HTML ডকুমেন্ট থেকে id দিয়ে একক এলিমেন্ট নির্বাচন করে। | document.getElementById("myId") |
getElementsByClassName() |
একই ক্লাসের সব এলিমেন্ট সংগ্রহ করে (HTMLCollection আকারে)। | document.getElementsByClassName("myClass") |
getElementsByTagName() |
নির্দিষ্ট ট্যাগ নামের সব এলিমেন্ট সংগ্রহ করে। | document.getElementsByTagName("p") |
querySelector() |
প্রথম মিলে এমন CSS সিলেক্টর দিয়ে এলিমেন্ট নির্বাচন। | document.querySelector(".myClass") |
querySelectorAll() |
মিলে এমন সব এলিমেন্টের NodeList আকারে সংগ্রহ। | document.querySelectorAll("div.note") |
createElement() |
নতুন HTML এলিমেন্ট তৈরি করে। | document.createElement("p") |
appendChild() |
কোন এলিমেন্টের শেষে নতুন চাইল্ড এলিমেন্ট যোগ করে। | parent.appendChild(child) |
removeChild() |
কোন চাইল্ড এলিমেন্ট DOM থেকে মুছে ফেলে। | parent.removeChild(child) |
replaceChild() |
DOM এর একটি চাইল্ড এলিমেন্ট আরেকটি দিয়ে প্রতিস্থাপন করে। | parent.replaceChild(newChild, oldChild) |
hasChildNodes() |
এলিমেন্টের কোন চাইল্ড নোড আছে কিনা চেক করে। | element.hasChildNodes() |
২. DOM Methods এর ব্যবহার উদাহরণ
// HTML অংশ (উদাহরণ):
// <div id="container"></div>
const container = document.getElementById("container");
// নতুন প্যারাগ্রাফ তৈরি করা
const para = document.createElement("p");
para.innerText = "আমি একটি নতুন প্যারাগ্রাফ।";
para.style.color = "green";
// container-এ প্যারাগ্রাফ যোগ করা
container.appendChild(para);
// প্যারাগ্রাফে ক্লিক ইভেন্ট যোগ করা
para.addEventListener("click", function() {
alert("আপনি প্যারাগ্রাফে ক্লিক করেছেন!");
});
৩. DOM মেথড দিয়ে এলিমেন্টের টেক্সট ও অ্যাট্রিবিউট পরিবর্তন
DOM Methods ব্যবহার করে আমরা সহজেই HTML উপাদানের টেক্সট ও অ্যাট্রিবিউট পরিবর্তন করতে পারি।
const heading = document.querySelector("h1");
// টেক্সট পরিবর্তন
heading.innerText = "নতুন শিরোনাম";
// id অ্যাট্রিবিউট পরিবর্তন
heading.id = "newId";
// অন্য অ্যাট্রিবিউট সেট করা
heading.setAttribute("title", "এটি একটি শিরোনাম");
৪. DOM মেথড দিয়ে এলিমেন্ট মুছে ফেলা এবং প্রতিস্থাপন
DOM থেকে এলিমেন্ট মুছে ফেলা বা প্রতিস্থাপন করাও খুব সহজ।
const list = document.getElementById("list");
// মুছে ফেলা
const firstItem = list.firstElementChild;
list.removeChild(firstItem);
// নতুন আইটেম তৈরি ও প্রতিস্থাপন
const newItem = document.createElement("li");
newItem.innerText = "নতুন আইটেম";
const secondItem = list.children[0];
list.replaceChild(newItem, secondItem);
৫. গুরুত্বপূর্ণ টিপস
- যখন
getElementsByClassName()বাgetElementsByTagName()ব্যবহার করেন, ফলাফল HTMLCollection হয়, যা লাইভ (Live) হয়। অর্থাৎ DOM পরিবর্তনের সাথে এটি আপডেট হয়। querySelectorAll()ফলাফল NodeList দেয়, যা স্ট্যাটিক (Static) এবং পরিবর্তন হয় না।- নতুন এলিমেন্ট তৈরি করলে প্রথমে সেটার প্রপার্টিজ বা স্টাইল দিন, তারপর পেজে যোগ করুন।
- DOM ম্যানিপুলেশনের সময় পারফরম্যান্স খেয়াল রাখুন। বেশি পরিবর্তন একসাথে করুন।