DOM Elements নির্বাচন এবং হ্যান্ডল করা

MooTools ব্যবহার করে DOM (Document Object Model) এলিমেন্ট নির্বাচন এবং হ্যান্ডল করা খুবই সহজ এবং কার্যকর। এটি ডেভেলপারদের জন্য এমন একটি শক্তিশালী টুল সরবরাহ করে, যা ওয়েব পেজের বিভিন্ন উপাদান সহজে ম্যানিপুলেট করতে সাহায্য করে। MooTools-এর মাধ্যমে DOM এলিমেন্টগুলো নির্বাচন এবং তাদের ওপর বিভিন্ন অ্যাকশন বা ইভেন্ট অ্যাটাচ করা যায়, যেমন ক্লাস অ্যাড, স্টাইল পরিবর্তন, ভ্যালু সেট করা ইত্যাদি।

MooTools দিয়ে DOM এলিমেন্ট নির্বাচন

MooTools ব্যবহার করে DOM এলিমেন্ট নির্বাচন করার জন্য $$() ফাংশন ব্যবহৃত হয়, যা jQuery-এর $(selector) এর মতো কাজ করে। এই ফাংশনটি একটি বা একাধিক DOM এলিমেন্ট নির্বাচন করতে ব্যবহৃত হয়।

১. একক এলিমেন্ট নির্বাচন

একটি নির্দিষ্ট ID বা ক্লাসের DOM এলিমেন্ট নির্বাচন করতে নিম্নলিখিত কোড ব্যবহার করা হয়:

// ID দ্বারা এলিমেন্ট নির্বাচন
var element = $('elementId');

// ক্লাস দ্বারা এলিমেন্ট নির্বাচন
var elements = $$

এখানে, $('elementId') একটি নির্দিষ্ট ID সহ এলিমেন্ট নির্বাচন করে, এবং $('div.someClass')</code> সমস্ত <code inline="">div</code> ট্যাগ যার ক্লাস <code inline="">someClass</code>, নির্বাচন করে।</p><h4>২. একাধিক এলিমেন্ট নির্বাচন</h4><p><code inline="">$() ফাংশন দিয়ে একাধিক এলিমেন্ট নির্বাচন করা যায়। উদাহরণস্বরূপ, সমস্ত p ট্যাগ নির্বাচন করা:

var paragraphs = $$('p');

এইভাবে, আপনি একাধিক এলিমেন্টও সহজেই নির্বাচন করতে পারবেন।

MooTools দিয়ে DOM এলিমেন্ট ম্যানিপুলেশন

DOM এলিমেন্ট নির্বাচনের পর, MooTools ব্যবহার করে আপনি বিভিন্ন ম্যানিপুলেশন করতে পারেন, যেমন অ্যাট্রিবিউট পরিবর্তন, ক্লাস পরিবর্তন, স্টাইল অ্যাড বা রিমুভ ইত্যাদি।

১. স্টাইল পরিবর্তন

MooTools ব্যবহার করে এলিমেন্টের স্টাইল পরিবর্তন করতে আপনি .setStyle() ফাংশন ব্যবহার করতে পারেন। উদাহরণ:

// এলিমেন্টের ব্যাকগ্রাউন্ড কালার পরিবর্তন
$('elementId').setStyle('background-color', 'red');

২. ক্লাস পরিবর্তন

DOM এলিমেন্টের ক্লাস পরিবর্তন করতে .addClass() এবং .removeClass() ফাংশন ব্যবহার করা হয়:

// ক্লাস অ্যাড
$('elementId').addClass('newClass');

// ক্লাস রিমুভ
$('elementId').removeClass('oldClass');

৩. অ্যাট্রিবিউট পরিবর্তন

এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন করতে .set() ফাংশন ব্যবহার করা হয়:

// এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন
$('elementId').set('href', 'https://www.example.com');

এটি href অ্যাট্রিবিউট পরিবর্তন করে, কিন্তু MooTools-এর মাধ্যমে অন্যান্য অ্যাট্রিবিউটও পরিবর্তন করা সম্ভব।

MooTools দিয়ে ইভেন্ট হ্যান্ডলিং

MooTools ইভেন্ট হ্যান্ডলিং সিস্টেমও খুবই শক্তিশালী এবং সহজ। এটি ইভেন্ট লিসেনার অ্যাড করার জন্য .addEvent() ফাংশন প্রদান করে, যা এলিমেন্টের উপর একটি ইভেন্ট ট্রিগার করলেই নির্দিষ্ট একটি ফাংশন চালু করে।

১. ক্লিক ইভেন্ট হ্যান্ডলিং

ক্লিক ইভেন্ট হ্যান্ডল করার জন্য MooTools এর .addEvent() ব্যবহার করা হয়:

$('elementId').addEvent('click', function() {
    alert('Element clicked!');
});

এটি যখন নির্দিষ্ট এলিমেন্টে ক্লিক করা হবে, তখন একটি অ্যালার্ট মেসেজ দেখাবে।

২. মাউসওভার ইভেন্ট হ্যান্ডলিং

এছাড়াও মাউসওভার বা অন্য কোন ইভেন্ট হ্যান্ডল করা যায়:

$('elementId').addEvent('mouseover', function() {
    this.setStyle('background-color', 'blue');
});

এই কোডে, যখন মাউস এলিমেন্টের উপর চলে আসে, তখন তার ব্যাকগ্রাউন্ড কালার পরিবর্তিত হবে।

সারাংশ

MooTools ব্যবহার করে DOM এলিমেন্ট নির্বাচন এবং ম্যানিপুলেশন অত্যন্ত সহজ এবং কার্যকরী। এটি ডেভেলপারদের বিভিন্ন DOM এলিমেন্ট নির্বাচন করতে এবং সেগুলোর ওপর স্টাইল, ক্লাস, অ্যাট্রিবিউট পরিবর্তন করতে সহায়তা করে। MooTools-এর ইভেন্ট হ্যান্ডলিং সিস্টেমও খুব শক্তিশালী, যা বিভিন্ন ইভেন্টের মাধ্যমে ইন্টারঅ্যাকটিভ ওয়েব পেজ তৈরি করতে সাহায্য করে।