Element Filtering এবং Manipulation

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

Element Filtering in MooTools

MooTools-এ filter() মেথড ব্যবহার করে আপনি একটি নির্দিষ্ট শর্তের উপর ভিত্তি করে DOM উপাদানগুলিকে ফিল্টার করতে পারেন। এটি কোনো নির্দিষ্ট কন্ডিশনের সঙ্গে মেলে এমন উপাদানগুলো নির্বাচন করতে সাহায্য করে। উদাহরণস্বরূপ, একটি তালিকায় যদি শুধুমাত্র এমন আইটেমগুলো চেক করতে চান যা কোনো নির্দিষ্ট ক্লাস ধারণ করে, তাহলে আপনি filter() মেথড ব্যবহার করতে পারেন।

উদাহরণ: Filter by Class

window.addEvent('domready', function() {
    // 'highlight' ক্লাস ধারণকারী এলিমেন্টগুলো ফিল্টার করা
    var elements = $$('div');
    var highlightedElements = elements.filter(function(element) {
        return element.hasClass('highlight');
    });

    // ফিল্টার করা এলিমেন্টগুলির উপর কিছু করা
    highlightedElements.each(function(element) {
        element.setStyle('color', 'red');
    });
});
এখানে:
$$
() ব্যবহার করে সমস্ত div এলিমেন্টগুলো নির্বাচন করা হয়েছে।
filter() মেথডের মাধ্যমে highlight ক্লাস ধারণকারী এলিমেন্টগুলো ফিল্টার করা হয়েছে।
each() মেথড ব্যবহার করে ফিল্টার করা এলিমেন্টগুলোকে লুপ করা হয়েছে এবং তাদের স্টাইল পরিবর্তন করা হয়েছে।
উদাহরণ: Filter by Attribute
window.addEvent('domready', function() {
    // 'data-id' অ্যাট্রিবিউট ধারণকারী এলিমেন্টগুলো ফিল্টার করা
    var elements = $$('[data-id]');
    var filteredElements = elements.filter(function(element) {
        return element.get('data-id') === '123';
    });

    // ফিল্টার করা এলিমেন্টগুলির উপর কিছু করা
    filteredElements.each(function(element) {
        element.setStyle('background-color', 'yellow');
    });
});
এখানে:
$$
('[data-id]') ব্যবহার করে সকল এলিমেন্ট যেগুলোর data-id অ্যাট্রিবিউট আছে, সেগুলি ফিল্টার করা হয়েছে।
get() মেথডের মাধ্যমে data-id অ্যাট্রিবিউটের মান পাওয়া গেছে এবং ফিল্টার করা হয়েছে।
Element Manipulation in MooTools
MooTools-এ DOM এলিমেন্ট ম্যানিপুলেশন খুবই সহজ এবং গতিশীল। আপনি বিভিন্ন মেথড ব্যবহার করে এলিমেন্টগুলোর স্টাইল, ক্লাস, অথবা অন্যান্য প্রপার্টি পরিবর্তন করতে পারেন। নিচে কিছু গুরুত্বপূর্ণ মেথডের উদাহরণ দেয়া হলো।
1. Changing Styles
window.addEvent('domready', function() {
    var myElement = $('myElement');
    myElement.setStyle('color', 'blue');  // এলিমেন্টের টেক্সটের রঙ পরিবর্তন করা
    myElement.setStyle('background-color', 'yellow');  // ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা
});
এখানে, setStyle() মেথড ব্যবহার করে myElement এর স্টাইল পরিবর্তন করা হয়েছে। আপনি এর মাধ্যমে টেক্সটের রঙ, ব্যাকগ্রাউন্ড রঙ, প্যাডিং, মার্জিন ইত্যাদি পরিবর্তন করতে পারেন।
2. Changing Classes
window.addEvent('domready', function() {
    var myElement = $('myElement');
    myElement.addClass('newClass');  // নতুন ক্লাস যোগ করা
    myElement.removeClass('oldClass');  // পুরানো ক্লাস মুছে ফেলা
});
এখানে, addClass() এবং removeClass() মেথড ব্যবহার করে এলিমেন্টের ক্লাস পরিবর্তন করা হয়েছে।
3. Setting Attributes
window.addEvent('domready', function() {
    var myElement = $('myElement');
    myElement.set('href', 'https://www.example.com');  // লিঙ্কের href অ্যাট্রিবিউট সেট করা
});
এখানে, set() মেথড ব্যবহার করে href অ্যাট্রিবিউটের মান সেট করা হয়েছে।
4. Element Insertion
window.addEvent('domready', function() {
    var myElement = $('myElement');
    var newDiv = new Element('div', {
        'class': 'newDivClass',
        'html': 'This is a new div!'
    });
    myElement.grab(newDiv, 'bottom');  // নতুন div ট্যাগটি myElement এর নিচে যোগ করা
});
এখানে, new Element() ব্যবহার করে একটি নতুন div এলিমেন্ট তৈরি করা হয়েছে এবং grab() মেথড ব্যবহার করে এটিকে myElement এর নিচে যোগ করা হয়েছে।
Combining Filtering and Manipulation
MooTools-এ ফিল্টারিং এবং ম্যানিপুলেশন একসাথে ব্যবহার করে আপনি আরও শক্তিশালী ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।
উদাহরণ: Filter and Modify Elements
window.addEvent('domready', function() {
    // সমস্ত 'highlight' ক্লাস ধারণকারী এলিমেন্টগুলো ফিল্টার করা
    var elements = $$('div');
    var highlightedElements = elements.filter(function(element) {
        return element.hasClass('highlight');
    });

    // ফিল্টার করা এলিমেন্টগুলোর স্টাইল পরিবর্তন করা
    highlightedElements.each(function(element) {
        element.setStyle('color', 'green');
        element.setStyle('font-weight', 'bold');
    });
});
এখানে:
filter() মেথডের মাধ্যমে highlight ক্লাস ধারণকারী সকল এলিমেন্ট ফিল্টার করা হয়েছে।
তারপর, each() মেথডের মাধ্যমে এই এলিমেন্টগুলোর স্টাইল পরিবর্তন করা হয়েছে।
সারাংশ
MooTools আপনাকে DOM element filtering এবং manipulation করতে সহজ এবং কার্যকরী উপায় প্রদান করে। filter() মেথড ব্যবহার করে আপনি নির্দিষ্ট শর্তে এলিমেন্ট নির্বাচন করতে পারেন এবং setStyle(), addClass(), removeClass(), এবং set() মেথড দিয়ে এলিমেন্টের প্রপার্টি পরিবর্তন করতে পারেন। এই দুটি কৌশল একসাথে ব্যবহার করে আপনি ওয়েব পেজে উন্নত ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে সক্ষম হবেন।