আগের আটটা পর্বে আমরা JavaScript-এর ভাষাগত ফান্ডামেন্টাল শিখেছি — variable, condition, loop, function, array, object। এখন থেকে আমরা এই জ্ঞান দিয়ে সত্যিকারের ওয়েবপেজে কাজ করা শুরু করবো। প্রথম ধাপ — DOM বোঝা।
DOM কী?
DOM মানে Document Object Model। যখন ব্রাউজার একটা HTML ফাইল লোড করে, তখন সেটা পুরো পেজটাকে একটা গাছের মতো (tree) কাঠামোতে রূপান্তর করে ব্রাউজারের মেমোরিতে রাখে — প্রতিটা HTML ট্যাগ হয়ে যায় একটা "নোড" (node)। এই পুরো কাঠামোটাই DOM।
JavaScript এই DOM-এর সাথে কথা বলতে পারে — মানে JavaScript দিয়ে আমরা:
- যেকোনো HTML এলিমেন্ট খুঁজে বের করতে পারি (select)
- তার টেক্সট বা HTML বদলাতে পারি
- তার স্টাইল বদলাতে পারি
- নতুন এলিমেন্ট তৈরি বা পুরনো এলিমেন্ট মুছে ফেলতে পারি
এতদিন আমরা HTML দিয়ে কাঠামো আর CSS দিয়ে সাজসজ্জা "স্ট্যাটিকভাবে" লিখতাম। এখন থেকে JavaScript দিয়ে সেই একই জিনিস ডাইনামিকভাবে, ইউজারের অ্যাকশন অনুযায়ী বদলাতে পারবো।
DOM Selection — এলিমেন্ট খুঁজে বের করা
কোনো এলিমেন্টে কাজ করার আগে সেটাকে খুঁজে বের করতে হবে (select করতে হবে)। এর জন্য কয়েকটা পদ্ধতি আছে।
getElementById()
HTML-এর id অ্যাট্রিবিউট দিয়ে একটা নির্দিষ্ট এলিমেন্ট খুঁজে বের করে (মনে আছে, একটা পেজে id একবারই থাকে):
<h1 id="title">স্বাগতম</h1>
<script>
const heading = document.getElementById("title");
console.log(heading); // পুরো h1 এলিমেন্টটা দেখাবে
</script>
document হলো JavaScript-এর একটা বিশেষ built-in object, যেটা পুরো HTML পেজকে represent করে — DOM-এর সাথে কাজ করার সবকিছুই document দিয়ে শুরু হয়।
querySelector() — আধুনিক ও নমনীয় পদ্ধতি
CSS selector-এর মতো সিনট্যাক্স ব্যবহার করে যেকোনো এলিমেন্ট খুঁজতে পারে — id, class, ট্যাগ, যেকোনো কিছু দিয়ে:
const byId = document.querySelector("#title"); // id দিয়ে
const byClass = document.querySelector(".card"); // class দিয়ে
const byTag = document.querySelector("p"); // ট্যাগ দিয়ে
লক্ষ করো — এখানে ঠিক CSS-এ যেভাবে selector লেখা হয় (#id, .class), querySelector()-এও ঠিক একইভাবে লেখা হয়। CSS পর্ব ১-এ যা শিখেছিলে, সেটাই এখানে কাজে লাগছে।
একটা গুরুত্বপূর্ণ পার্থক্য: যদি পেজে একই class-এর একাধিক এলিমেন্ট থাকে, querySelector() শুধু প্রথমটা রিটার্ন করে।
querySelectorAll() — একাধিক এলিমেন্ট
একই class বা selector-এর সব এলিমেন্ট একসাথে পেতে querySelectorAll() ব্যবহার হয়:
<div class="card">কার্ড ১</div>
<div class="card">কার্ড ২</div>
<div class="card">কার্ড ৩</div>
<script>
const cards = document.querySelectorAll(".card");
console.log(cards.length); // 3
for (const card of cards) {
console.log(card);
}
</script>
querySelectorAll() একটা লিস্ট রিটার্ন করে (ঠিক array-এর মতো আচরণ করে), যেটাকে আগের পর্বে শেখা for...of দিয়ে ঘোরা যায়।
Selection পদ্ধতির সারসংক্ষেপ
| Method | রিটার্ন করে |
|---|---|
getElementById("id") |
একটা এলিমেন্ট (id অনুযায়ী) |
querySelector("সিলেক্টর") |
প্রথম মিলে যাওয়া এলিমেন্ট |
querySelectorAll("সিলেক্টর") |
মিলে যাওয়া সব এলিমেন্টের একটা লিস্ট |
টিপস: আধুনিক JavaScript-এ querySelector() ও querySelectorAll() সবচেয়ে বেশি ব্যবহার হয়, কারণ এগুলো নমনীয় (id, class, ট্যাগ — সব কাজ করে) এবং CSS selector-এর সাথে সামঞ্জস্যপূর্ণ। এই সিরিজে এখন থেকে আমরা প্রধানত এই দুইটাই ব্যবহার করবো।
Script কোথায় বসবে — একটা গুরুত্বপূর্ণ বিষয়
পর্ব ১-এ আমরা বলেছিলাম <script> সাধারণত </body>-এর ঠিক আগে বসানো উচিত। DOM নিয়ে কাজ করার সময় এটা আরও গুরুত্বপূর্ণ হয়ে যায় — যদি script উপরে (<head>-এ) থাকে এবং সেটা এমন একটা এলিমেন্ট select করার চেষ্টা করে যেটা তখনো HTML-এ লোড হয়নি, তাহলে JavaScript সেটাকে null পাবে — কারণ এলিমেন্টটা তখনো তৈরিই হয়নি।
<!-- ভুল: script উপরে, h1 এখনো লোড হয়নি -->
<head>
<script>
const heading = document.getElementById("title");
console.log(heading); // null !
</script>
</head>
<body>
<h1 id="title">স্বাগতম</h1>
</body>
একটা সম্পূর্ণ উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>DOM Selection উদাহরণ</title>
</head>
<body>
<h1 id="title">আমার ব্লগ</h1>
<div class="card">কার্ড ১</div>
<div class="card">কার্ড ২</div>
<div class="card">কার্ড ৩</div>
<script>
const heading = document.getElementById("title");
console.log("হেডিং:", heading);
const firstCard = document.querySelector(".card");
console.log("প্রথম কার্ড:", firstCard);
const allCards = document.querySelectorAll(".card");
console.log("মোট কার্ড:", allCards.length);
</script>
</body>
</html>
নিজে চেষ্টা করো
Exercise:
- একটা HTML পেজ বানাও, তাতে একটা
idদেওয়া heading আর তিনটা একইclass-এর div রাখো getElementById()দিয়ে heading-টা select করে console-এ দেখাওquerySelectorAll()দিয়ে সবগুলো div একসাথে select করো,.lengthদিয়ে কয়টা আছে দেখাও- script ট্যাগ ইচ্ছাকৃতভাবে
<head>-এ বসিয়ে দেখোnullকীভাবে আসে
পরের পর্বে যা থাকছে
পর্ব ১০-এ আমরা শিখবো DOM Manipulation — এলিমেন্ট শুধু খুঁজে বের করাই না, তার কন্টেন্ট, স্টাইল, ও ক্লাস বদলানো, উদাহরণসহ।