JavaScript HTML DOM Methods – বাংলা টিউটোরিয়াল
DOM Methods হলো JavaScript এর কিছু ফাংশন যেগুলোর মাধ্যমে আমরা HTML ডকুমেন্টের যেকোনো এলিমেন্ট নির্বাচন, পরিবর্তন বা ম্যানিপুলেট করতে পারি। এই মেথডগুলো DOM ট্রি-র মধ্যে থেকে নির্দিষ্ট এলিমেন্ট খুঁজে এনে আমাদের কাঙ্ক্ষিত কাজ করতে সাহায্য করে।
১. getElementById()
এই মেথডটি ব্যবহার করে একটি নির্দিষ্ট id দ্বারা HTML এলিমেন্ট নির্বাচন করা যায়।
<p id="demo">Hello World</p>
<script>
document.getElementById("demo").innerHTML = "Hello DOM!";
</script>
ব্যাখ্যা: এখানে getElementById("demo") ব্যবহার করে প্যারাগ্রাফটিকে টার্গেট করে তার ভেতরের লেখা পরিবর্তন করা হয়েছে।
২. getElementsByClassName()
এই মেথডটি ব্যবহার করে নির্দিষ্ট class এর সব এলিমেন্ট একসাথে নির্বাচন করা যায়। এটি একটি HTMLCollection রিটার্ন করে।
<p class="text">Text 1</p>
<p class="text">Text 2</p>
let items = document.getElementsByClassName(“text”);
items[0].innerHTML = “Updated Text 1”;
items[1].style.color = “red”;
</script>
ব্যাখ্যা: এখানে দুটি এলিমেন্ট একসাথে ক্লাসের মাধ্যমে সিলেক্ট করা হয়েছে এবং তারপর আলাদাভাবে ম্যানিপুলেট করা হয়েছে।
৩. getElementsByTagName()
এই মেথডটি দিয়ে নির্দিষ্ট HTML tag name দ্বারা সব এলিমেন্ট নির্বাচন করা হয় (যেমন: সব <p> বা <li> একসাথে)।
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
let items = document.getElementsByTagName(“li”);
items[1].innerHTML = “Updated Item 2”;
</script>
ব্যাখ্যা: এখানে li ট্যাগ ব্যবহার করে সব তালিকা আইটেম পাওয়া যাচ্ছে।
৪. querySelector()
এই মেথডটি CSS selector এর মতো করে প্রথম যে এলিমেন্ট মিলে তাকে নির্বাচন করে।
<p class="info">Old Text</p>
document.querySelector(“.info”).textContent = “New Text”;
</script>
ব্যাখ্যা: CSS selector .info দ্বারা ক্লাস ভিত্তিক প্রথম প্যারাগ্রাফকে খুঁজে আনা হয়েছে এবং সেটি আপডেট করা হয়েছে।
৫. querySelectorAll()
এটি querySelector()-এর মতো তবে সব মিল থাকা এলিমেন্টকে একসাথে নির্বাচন করে NodeList আকারে দেয়।
<div class="note">Note 1</div>
<div class="note">Note 2</div>
let notes = document.querySelectorAll(“.note”);
notes.forEach((el, i) => {
el.style.backgroundColor = “lightblue”;
});
</script>
ব্যাখ্যা: এখানে querySelectorAll ব্যবহার করে একাধিক ডিভ নির্বাচন করে তাদের ব্যাকগ্রাউন্ড পরিবর্তন করা হয়েছে।
উপসংহার
JavaScript DOM Methods হল এমন কিছু কার্যকর টুল, যেগুলো দিয়ে আপনি HTML DOM এর যেকোনো অংশ খুব সহজে খুঁজে পেতে ও ম্যানিপুলেট করতে পারেন।
এই মেথডগুলো ভালোভাবে জানতে পারলে আপনি যেকোনো ডায়নামিক UI তৈরি করতে পারবেন এবং ফর্ম ভ্যালিডেশন, লাইভ ফিডব্যাক, ইন্টার্যাকটিভ ফিচার তৈরি করতে পারবেন।