MooTools-এ Element Traversal Methods ডেভেলপারদের জন্য ওয়েব পেজের DOM (Document Object Model) উপাদানগুলির মধ্যে নেভিগেট বা চলাচল করতে সহায়তা করে। এর মাধ্যমে আপনি একটি উপাদানের পিতা-মাতা, সন্তানেরা বা প্রতিবেশী উপাদানগুলির (siblings) উপর সহজেই কাজ করতে পারেন। MooTools-এর getParent(), getChildren(), এবং getSiblings() মেথডগুলো এই কাজগুলোর জন্য ব্যবহৃত হয়।
১. getParent() মেথড
getParent() মেথড একটি নির্দিষ্ট DOM উপাদানের পিতা-মাতাকে (parent element) রিটার্ন করে। এটি খুবই কার্যকরী যখন আপনি একটি উপাদান থেকে তার পিতা-মাতা উপাদানটি খুঁজে পেতে চান।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools getParent Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var childElement = $('childElement'); // সন্তানের এলিমেন্ট সিলেক্ট করা
var parentElement = childElement.getParent(); // পিতা-মাতা উপাদান পেতে
console.log(parentElement); // পিতা-মাতা উপাদান কনসোল লগে দেখানো
});
</script>
</head>
<body>
<div id="parentElement">
<div id="childElement">এইটি একটি সন্তানের উপাদান</div>
</div>
</body>
</html>
এখানে, getParent() মেথড childElement এর পিতা-মাতা (অর্থাৎ parentElement) উপাদান রিটার্ন করবে।
২. getChildren() মেথড
getChildren() মেথডটি একটি নির্দিষ্ট DOM উপাদানের সমস্ত সন্তান (child elements) রিটার্ন করে। এটি একটি উপাদানের ভিতরের সব উপাদানগুলি নিয়ে কাজ করার জন্য ব্যবহৃত হয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools getChildren Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var parentElement = $('parentElement'); // পিতা-মাতা এলিমেন্ট সিলেক্ট করা
var childrenElements = parentElement.getChildren(); // সকল সন্তান উপাদান পেতে
console.log(childrenElements); // সন্তানের উপাদান কনসোল লগে দেখানো
});
</script>
</head>
<body>
<div id="parentElement">
<div>সন্তান ১</div>
<div>সন্তান ২</div>
<div>সন্তান ৩</div>
</div>
</body>
</html>
এখানে, getChildren() মেথড parentElement এর সকল সন্তান উপাদান রিটার্ন করবে (যেমন ৩টি ডিভ ট্যাগ)।
৩. getSiblings() মেথড
getSiblings() মেথডটি একটি নির্দিষ্ট উপাদানের সমস্ত প্রতিবেশী (siblings) উপাদান রিটার্ন করে, অর্থাৎ সেই উপাদানটির সাথে একই স্তরে থাকা অন্যান্য উপাদান। এই মেথডটি আপনি তখন ব্যবহার করবেন যখন আপনি একটি উপাদানকে তার প্রতিবেশী উপাদানগুলির সাথে তুলনা করতে চান।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools getSiblings Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var targetElement = $('childElement'); // লক্ষ্য উপাদান সিলেক্ট করা
var siblingElements = targetElement.getSiblings(); // প্রতিবেশী উপাদান পেতে
console.log(siblingElements); // প্রতিবেশী উপাদান কনসোল লগে দেখানো
});
</script>
</head>
<body>
<div id="parentElement">
<div>প্রতিবেশী ১</div>
<div id="childElement">লক্ষ্য উপাদান</div>
<div>প্রতিবেশী ২</div>
</div>
</body>
</html>
এখানে, getSiblings() মেথড childElement এর প্রতিবেশী উপাদানগুলোকে রিটার্ন করবে (যেমন "প্রতিবেশী ১" এবং "প্রতিবেশী ২")।
সারাংশ
MooTools-এ Element Traversal Methods ব্যবহার করে আপনি খুব সহজেই DOM উপাদানগুলির মধ্যে নেভিগেট করতে পারেন। getParent(), getChildren(), এবং getSiblings() মেথডগুলো ডেভেলপারদের পিতা-মাতা, সন্তান এবং প্রতিবেশী উপাদানগুলির উপর কাজ করতে সহায়তা করে, যা ওয়েব ডেভেলপমেন্টে বেশ কার্যকরী। এই মেথডগুলির মাধ্যমে আপনি DOM-এর ভেতরের সম্পর্কগুলো সহজে খুঁজে বের করতে পারেন এবং তাদের ওপর বিভিন্ন কাজ করতে পারেন।
Read more
