DOM (Document Object Model) হল একটি প্রোগ্রামিং ইন্টারফেস যা HTML এবং XML ডকুমেন্টের কাঠামো এবং কনটেন্টকে উপস্থাপন করে। এটি একটি গাছের মতো কাঠামোতে ডকুমেন্টের অংশগুলিকে উপস্থাপন করে, যেখানে প্রতিটি উপাদান, অ্যাট্রিবিউট, এবং টেক্সট নোড হিসেবে পরিচিত। জাভাস্ক্রিপ্ট ব্যবহার করে এই DOM এর বিভিন্ন অংশে পরিবর্তন আনা সম্ভব হয়। এই গাইডে আমরা DOM এর মৌলিক বিষয়গুলো থেকে শুরু করে উন্নত ম্যানিপুলেশন কৌশলগুলো নিয়ে আলোচনা করবো।
DOM গঠন
DOM গঠন একটি গাছের মতো কাঠামোতে থাকে যেখানে মূল ডকুমেন্ট হলো রুট, এবং এর অধীনে বিভিন্ন নোডস রয়েছে যেমন এলিমেন্ট, এট্রিবিউট, এবং টেক্সট নোডস।
HTML ডকুমেন্টের DOM কাঠামো
নিচে একটি সাধারণ HTML ডকুমেন্ট এবং তার DOM কাঠামোর উদাহরণ দেওয়া হলো:
<!DOCTYPE html> <html> <head> <title>আমার ওয়েবপেজ</title> </head> <body> <h1>স্বাগতম</h1> <p id="intro">এই প্যারাগ্রাফটি একটি উদাহরণ।</p> <button onclick="changeText()">প্যারাগ্রাফ পরিবর্তন করুন</button> </body> </html>
উপরের HTML ডকুমেন্টের DOM কাঠামো কিছুটা এরকম হবে।
document ├── html │ ├── head │ │ └── title │ └── body │ ├── h1 │ ├── p (id="intro") │ └── button
জাভাস্ক্রিপ্ট ব্যবহার করে DOM ম্যানিপুলেট করার বিভিন্ন পদ্ধতি রয়েছে। এখানে কিছু মৌলিক বিষয় নিয়ে আলোচনা করা হলো।
এলিমেন্ট নির্বাচন
জাভাস্ক্রিপ্ট ব্যবহার করে HTML ডকুমেন্ট থেকে এলিমেন্ট নির্বাচন করা যায়। এতে কয়েকটি পদ্ধতি রয়েছে, যা নিম্মরুপ।
নিচে এগুলোর উদাওরন দেকুন।
// getElementById ব্যবহার করে var header = document.getElementById('header'); // querySelector ব্যবহার করে var paragraph = document.querySelector('p'); // querySelectorAll ব্যবহার করে var buttons = document.querySelectorAll('button');
জাভাস্ক্রিপ্ট ব্যবহার করে এলিমেন্টের বৈশিষ্ট্য পরিবর্তন করা যায়। নিচে এর উদাওরন দেকুন।
// টেক্সট পরিবর্তন var paragraph = document.getElementById('intro'); paragraph.textContent = 'নতুন টেক্সট'; // এট্রিবিউট পরিবর্তন var button = document.querySelector('button'); button.setAttribute('class', 'btn-primary'); // স্টাইল পরিবর্তন button.style.backgroundColor = 'blue'; button.style.color = 'white';
নতুন এলিমেন্ট তৈরি এবং যুক্ত করা যায়। নিচে এর উদাওরন দেকুন।
// নতুন এলিমেন্ট তৈরি করা var newElement = document.createElement('div'); newElement.textContent = 'আমি নতুন এলিমেন্ট।'; // একটি বিদ্যমান এলিমেন্টে যুক্ত করা var container = document.getElementById('container'); container.appendChild(newElement);
একটি এলিমেন্ট DOM থেকে মুছে ফেলা যায়। নিচে এর উদাওরন দেকুন।
var elementToRemove = document.getElementById('removeMe'); elementToRemove.parentNode.removeChild(elementToRemove);
ইভেন্ট হ্যান্ডলিং হল ইউজার ইন্টারঅ্যাকশন পরিচালনা করার একটি পদ্ধতি। ইভেন্ট হ্যান্ডলার ব্যবহার করে বিভিন্ন ইভেন্ট যেমন ক্লিক, হোভার ইত্যাদি পরিচালনা করা যায়। নিচে ইভেন্ট লিসেনার যোগ করার কোড দেকুন।
var button = document.querySelector('button'); button.addEventListener('click', function() { alert('বাটন ক্লিক করা হয়েছে!'); });
ইভেন্ট অবজেক্ট
ইভেন্ট হ্যান্ডলার একটি ইভেন্ট অবজেক্ট প্রদান করে যা ইভেন্ট সম্পর্কে বিস্তারিত তথ্য ধারণ করে। নিচে এর উদাওরন দেকুন।document.querySelector('button').addEventListener('click', function(event) { console.log('ইভেন্ট টাইপ:', event.type); console.log('টারের এলিমেন্ট:', event.target); });
DOM ফ্র্যাগমেন্টস
DOM ফ্র্যাগমেন্টস হল একটি সংকলন যা DOM এ একাধিক এলিমেন্ট একসাথে যোগ করার জন্য ব্যবহার করা যায়।
var fragment = document.createDocumentFragment(); var div1 = document.createElement('div'); div1.textContent = 'ফ্র্যাগমেন্টের প্রথম এলিমেন্ট'; fragment.appendChild(div1); var div2 = document.createElement('div'); div2.textContent = 'ফ্র্যাগমেন্টের দ্বিতীয় এলিমেন্ট'; fragment.appendChild(div2); document.body.appendChild(fragment);
ক্লোনিং এলিমেন্ট
একটি এলিমেন্টের ক্লোন তৈরি এবং যুক্ত করার উদাহরণ:
var original = document.getElementById('original'); var clone = original.cloneNode(true); // true means deep clone document.body.appendChild(clone);
ফর্ম এলিমেন্টগুলো DOM এ বিভিন্নভাবে পরিচালিত হতে পারে। নিচে একটি উদাওরন দেকুন জেকানে, ফর্মের মান অ্যাক্সেস করা যায়।
var input = document.querySelector('input[name="username"]'); var value = input.value; console.log('ইনপুট মান:', value);
ফর্ম সাবমিট হ্যান্ডলিং করার জন্য নিচের কোড গুলো বাবয়ার করতে পারি।
document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); // সাবমিট হ্যান্ডলিং থেকে পেজ রিফ্রেশ বন্ধ করা var username = document.querySelector('input[name="username"]').value; alert('নাম: ' + username); });
জাভাস্ক্রিপ্টের পরিবর্তে সিএসএস ক্লাস ব্যবহার করে স্টাইল পরিবর্তন করা হতে পারে আরও কার্যকর। নিচে এর সিএসএস ক্লাস ব্যবহার করে স্টাইল পরিবর্তন করা অয়েচে।
var element = document.querySelector('.my-element'); element.classList.add('active'); // ক্লাস যোগ করা element.classList.remove('active'); // ক্লাস মুছে ফেলা
একাধিক এলিমেন্টে ইভেন্ট হ্যান্ডলার যোগ করার পরিবর্তে একটি প্যারেন্ট এলিমেন্টে ইভেন্ট লিসেনার যোগ করা। নিচে এর একটি উদাওরন দেকুন।
document.querySelector('#parent').addEventListener('click', function(event) { if (event.target.matches('button')) { alert('বাটন ক্লিক করা হয়েছে!'); } });
ভার্চুয়াল DOM - অ্যাপ্লিকেশনগুলির পারফরম্যান্স উন্নত করতে ভার্চুয়াল DOM ব্যবহার করা হয়। ভার্চুয়াল DOM হল DOM এর একটি ভার্চুয়াল কপি যা দ্রুত ম্যানিপুলেশন এবং আপডেটের জন্য ব্যবহার করা হয়।
পেইজ রেন্ডারিং অপ্টিমাইজেশন - ইনলাইন স্ক্রিপ্ট এবং স্টাইলের ব্যবহার কমিয়ে পেইজ রেন্ডারিং অপ্টিমাইজ করা যায়। অ্যাসিনক্রোনাস স্ক্রিপ্ট লোডিং এবং লেজি লোডিং প্রযুক্তি ব্যবহার করা হয়।
এই টিউটোরিয়ালে আমরা DOM এর মৌলিক ধারণা, এর উপাদান, এবং জাভাস্ক্রিপ্ট ব্যবহার করে কিভাবে DOM ম্যানিপুলেশন করতে হয় তা বিস্তারিতভাবে আলোচনা করেছি। DOM এর বিভিন্ন অংশে পরিবর্তন আনা, ইভেন্ট হ্যান্ডলিং, নতুন এলিমেন্ট যোগ করা, এবং উন্নত টেকনিকগুলো যেমন ভার্চুয়াল DOM এবং পারফরম্যান্স অপ্টিমাইজেশন নিয়েও আলোচনা করা হয়েছে। আশা করি এই গাইড আপনার ওয়েব ডেভেলপমেন্ট দক্ষতা উন্নত করতে সাহায্য করবে।