MooTools একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি, যা HTML এলিমেন্ট তৈরি এবং তাদের গুণাবলি পরিবর্তন (Modify) করার জন্য বেশ সহজ এবং কার্যকরী ফিচার সরবরাহ করে। এটি ডেভেলপারদের DOM (Document Object Model) ম্যানিপুলেশনের কাজ সহজ করে তোলে। MooTools ব্যবহার করে আপনি HTML এলিমেন্ট তৈরি, টেক্সট পরিবর্তন, এবং এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন করতে পারেন।
HTML এলিমেন্ট তৈরি করা
MooTools দিয়ে HTML এলিমেন্ট তৈরি করতে খুব সহজ। new Element() ফাংশনটি ব্যবহার করে নতুন HTML এলিমেন্ট তৈরি করা যায়।
<script type="text/javascript">
var newDiv = new Element('div', {
'id': 'newElement',
'class': 'box',
'html': 'This is a new div element'
});
// নতুন এলিমেন্টটি DOM-এ অ্যাড করা
newDiv.inject(document.body);
</script>
এখানে new Element() ফাংশনটি একটি নতুন div এলিমেন্ট তৈরি করে, যা id, class, এবং html অ্যাট্রিবিউটের মাধ্যমে কনফিগার করা হয়। inject() ফাংশনটি এই এলিমেন্টটি body এ যোগ করে দেয়।
টেক্সট পরিবর্তন করা
MooTools ব্যবহার করে সহজেই HTML এলিমেন্টের ভিতরের টেক্সট পরিবর্তন করা সম্ভব। set('html') বা set('text') ফাংশন ব্যবহার করে এটি করা যায়।
<script type="text/javascript">
var element = document.id('existingElement'); // একটি বিদ্যমান এলিমেন্ট নির্বাচন
element.set('html', 'Updated content!'); // HTML কনটেন্ট পরিবর্তন
// অথবা
element.set('text', 'Updated text content'); // টেক্সট কনটেন্ট পরিবর্তন
</script>
এখানে set('html') বা set('text') ফাংশন ব্যবহার করে এলিমেন্টের ভেতরের টেক্সট বা HTML কনটেন্ট পরিবর্তন করা হয়েছে।
এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন
MooTools দিয়ে একটি এলিমেন্টের অ্যাট্রিবিউট যেমন id, class, src, href ইত্যাদি পরিবর্তন করা খুব সহজ। এর জন্য set() ফাংশন ব্যবহার করা হয়।
<script type="text/javascript">
var element = document.id('existingElement');
element.set('id', 'newId'); // id অ্যাট্রিবিউট পরিবর্তন
element.set('class', 'newClass'); // class অ্যাট্রিবিউট পরিবর্তন
element.set('href', 'https://www.example.com'); // href অ্যাট্রিবিউট পরিবর্তন
</script>
এখানে set() ফাংশনটি ব্যবহার করে এলিমেন্টের বিভিন্ন অ্যাট্রিবিউট পরিবর্তন করা হয়েছে। অ্যাট্রিবিউটের নাম প্রথম আর্গুমেন্ট হিসেবে এবং তার নতুন মান দ্বিতীয় আর্গুমেন্ট হিসেবে প্রদান করা হয়।
নতুন এলিমেন্ট তৈরি এবং অন্য এলিমেন্টে ইনজেক্ট করা
MooTools-এ নতুন HTML এলিমেন্ট তৈরি এবং তা অন্য একটি বিদ্যমান এলিমেন্টে যোগ করার জন্য inject() ফাংশন ব্যবহার করা হয়। এটি খুবই কার্যকরী যখন আপনি ডাইনামিকভাবে ওয়েব পেজে নতুন উপাদান যোগ করতে চান।
<script type="text/javascript">
var newParagraph = new Element('p', {
'html': 'This is a dynamically added paragraph'
});
// নতুন প্যারাগ্রাফটি একটি বিদ্যমান div এ যোগ করা
newParagraph.inject('existingDiv');
</script>
এখানে একটি নতুন p এলিমেন্ট তৈরি করা হয়েছে এবং সেটি একটি বিদ্যমান div-এ inject() ফাংশন ব্যবহার করে যুক্ত করা হয়েছে।
বিভিন্ন মেথড ব্যবহার করে এলিমেন্ট Modify করা
MooTools অনেক ধরনের ফাংশন প্রদান করে, যা এলিমেন্টকে modify করতে সাহায্য করে। এর মধ্যে addClass(), removeClass(), setStyle(), getStyle() ইত্যাদি ফাংশন রয়েছে।
ক্লাস অ্যাড এবং রিমুভ করা
<script type="text/javascript">
var element = document.id('myElement');
element.addClass('newClass'); // নতুন ক্লাস অ্যাড করা
element.removeClass('oldClass'); // পুরনো ক্লাস রিমুভ করা
</script>
এখানে addClass() এবং removeClass() ফাংশন ব্যবহার করে এলিমেন্টের ক্লাস অ্যাট্রিবিউট পরিবর্তন করা হয়েছে।
স্টাইল পরিবর্তন করা
<script type="text/javascript">
var element = document.id('myElement');
element.setStyle('color', 'red'); // CSS স্টাইল পরিবর্তন
element.setStyle('background-color', '#f0f0f0');
</script>
এখানে setStyle() ফাংশন ব্যবহার করে এলিমেন্টের CSS স্টাইল পরিবর্তন করা হয়েছে।
সারাংশ
MooTools ব্যবহার করে HTML এলিমেন্ট তৈরি এবং তাদের টেক্সট ও অ্যাট্রিবিউট পরিবর্তন করা খুবই সহজ এবং দ্রুত। new Element() ফাংশন দিয়ে নতুন এলিমেন্ট তৈরি, set() দিয়ে টেক্সট বা অ্যাট্রিবিউট পরিবর্তন, এবং inject() দিয়ে এলিমেন্ট অন্য কোথাও ইনজেক্ট করা সম্ভব। MooTools ডেভেলপারদের জন্য একটি শক্তিশালী এবং লাইটওয়েট টুল যা DOM ম্যানিপুলেশনকে আরও সহজ এবং কার্যকরী করে তোলে।
Read more
