Element এর সাথে ডেটা যুক্ত এবং রিমুভ করা

MooTools-এ ডেটা অ্যাটাচমেন্ট এবং ডেটা রিমুভাল একটি এলিমেন্টের সাথে সম্পর্কিত ডেটা সংরক্ষণ এবং মুছে ফেলার জন্য ব্যবহার করা হয়। এতে, আপনি একটি নির্দিষ্ট DOM এলিমেন্টের সাথে অতিরিক্ত ডেটা যুক্ত করতে এবং পরে সেই ডেটা পুনরুদ্ধার বা মুছে ফেলতে পারবেন, যা ওয়েব অ্যাপ্লিকেশনের জন্য খুবই কার্যকরী।

MooTools এই কাজগুলো করার জন্য set এবং get মেথড প্রদান করে, যা DOM এলিমেন্টের সাথে কাস্টম ডেটা সংরক্ষণ এবং পুনরুদ্ধারের জন্য ব্যবহৃত হয়।

1. Element এর সাথে ডেটা যুক্ত করা (set)

MooTools-এ set মেথড ব্যবহার করে আপনি একটি DOM এলিমেন্টের সাথে কাস্টম ডেটা অ্যাটাচ করতে পারেন। এটি সাধারণত id, class, বা অন্যান্য স্ট্যান্ডার্ড অ্যাট্রিবিউটের বাইরে অতিরিক্ত তথ্য সংরক্ষণ করতে ব্যবহৃত হয়।

উদাহরণ: ডেটা যুক্ত করা

window.addEvent('domready', function() {
    var element = document.id('myElement');
    
    // এলিমেন্টের সাথে কাস্টম ডেটা যুক্ত করা
    element.set('data-name', 'John Doe');
    element.set('data-age', 30);
});

এখানে:

• set('data-name', 'John Doe') দ্বারা myElement এলিমেন্টে data-name নামক একটি কাস্টম ডেটা অ্যাট্রিবিউট যোগ করা হয়েছে এবং এর মান 'John Doe' সেট করা হয়েছে।
• set('data-age', 30) দ্বারা একইভাবে data-age ডেটা যুক্ত করা হয়েছে।

2. Element থেকে ডেটা পড়া (get)

একবার ডেটা অ্যাটাচ করার পরে, আপনি get মেথড ব্যবহার করে সেই ডেটা পুনরুদ্ধার করতে পারেন। এটি DOM এলিমেন্টের সাথে অ্যাটাচ করা কাস্টম ডেটা ফিরে আনে।

উদাহরণ: ডেটা পড়া

window.addEvent('domready', function() {
    var element = document.id('myElement');
    
    // এলিমেন্ট থেকে কাস্টম ডেটা পড়া
    var name = element.get('data-name');
    var age = element.get('data-age');
    
    console.log('Name: ' + name);  // আউটপুট: Name: John Doe
    console.log('Age: ' + age);    // আউটপুট: Age: 30
});

এখানে, get('data-name') এবং get('data-age') ব্যবহার করে myElement এলিমেন্টের সাথে সংযুক্ত ডেটা পাওয়া যাচ্ছে।

3. Element এর সাথে ডেটা রিমুভ করা (remove)

MooTools-এ remove মেথড ব্যবহার করে আপনি একটি এলিমেন্টের সাথে অ্যাটাচ করা ডেটা সরিয়ে ফেলতে পারেন।

উদাহরণ: ডেটা রিমুভ করা

window.addEvent('domready', function() {
    var element = document.id('myElement');
    
    // এলিমেন্ট থেকে ডেটা রিমুভ করা
    element.remove('data-name');
    element.remove('data-age');
});

এখানে, remove('data-name') এবং remove('data-age') ব্যবহার করে myElement এলিমেন্টের সাথে সংযুক্ত ডেটা মুছে ফেলা হয়েছে।

4. Data Attributes এবং Custom Data

MooTools-এ set, get, এবং remove মেথডগুলি মূলত data attributes-এর সাথে কাজ করে। Data attributes HTML5 এ নতুন একটি ফিচার হিসেবে এসেছে, যার মাধ্যমে HTML এলিমেন্টের সাথে কাস্টম ডেটা সংযুক্ত করা যায়। MooTools এই ডেটা অ্যাট্রিবিউটগুলিকে সহজে ম্যানেজ করতে সাহায্য করে।

HTML Data Attribute Example

<div id="myElement" data-name="John Doe" data-age="30">Hello</div>

এখানে, HTML এলিমেন্টে data-name এবং data-age নামক কাস্টম ডেটা অ্যাট্রিবিউট যোগ করা হয়েছে।

5. প্রতিটি এলিমেন্টের সাথে ডেটা সংরক্ষণ ও পুনরুদ্ধার

MooTools set এবং get মেথডের মাধ্যমে আপনি প্রতিটি DOM এলিমেন্টের সাথে কাস্টম ডেটা অ্যাটাচ করতে পারেন এবং পরে সেগুলি পুনরুদ্ধার করতে পারেন। এটি সেগুলিকে সহজেই ট্র্যাক এবং ম্যানিপুলেট করার জন্য কার্যকরী।

উদাহরণ: একাধিক এলিমেন্টের সাথে ডেটা সংরক্ষণ

window.addEvent('domready', function() {
    var elements = $$('div.myClass');  // 'myClass' ক্লাসের সকল এলিমেন্ট নির্বাচন
    elements.each(function(element) {
        element.set('data-clicked', false);  // ডেটা অ্যাট্রিবিউট অ্যাটাচ করা
    });
    
    // কোন একটি এলিমেন্টে ক্লিক করার পরে ডেটা পরিবর্তন
    elements[0].addEvent('click', function() {
        var clicked = this.get('data-clicked');
        this.set('data-clicked', !clicked);  // ডেটা পরিবর্তন করা
        console.log('Clicked: ' + this.get('data-clicked'));
    });
});
এখানে, $$
('div.myClass') ব্যবহার করে সব div এলিমেন্ট সিলেক্ট করা হয়েছে যাদের myClass ক্লাস রয়েছে। পরে set('data-clicked', false) ব্যবহার করে তাদের সাথে কাস্টম ডেটা অ্যাট্রিবিউট যুক্ত করা হয়েছে এবং পরে ক্লিক হলে সেই ডেটা পরিবর্তন করা হয়েছে।
সারাংশ
MooTools-এ set, get, এবং remove মেথড ব্যবহার করে আপনি সহজেই DOM এলিমেন্টের সাথে কাস্টম ডেটা যুক্ত, পড়া এবং রিমুভ করতে পারেন। এই মেথডগুলি HTML5 data attributes-এর সাথে কাজ করে, যা ওয়েব ডেভেলপমেন্টে খুবই কার্যকরী। MooTools এর এই ফিচার ওয়েব পেজের ডাইনামিক ম্যানিপুলেশন এবং ডেটা ম্যানেজমেন্টকে অনেক সহজ করে তোলে।