JavaScript HTML DOM Traversing – সম্পূর্ণ বাংলা টিউটোরিয়াল
DOM Traversing বলতে বোঝায় HTML ডকুমেন্টে অবস্থিত নোড বা এলিমেন্টগুলোর মধ্যে যাতায়াত করা, অর্থাৎ এক এলিমেন্ট থেকে অন্য এলিমেন্টে যাওয়ার প্রক্রিয়া। JavaScript দিয়ে ওয়েবপেজের DOM ট্রাভার্স করে আপনি খুব সহজেই যেকোনো এলিমেন্ট খুঁজে পেতে, তাদের পরিবর্তন করতে এবং ইন্টার্যাকটিভ ওয়েবপেজ তৈরি করতে পারবেন।
1️⃣ DOM Traversing এর মূল মেথডসমূহ
- parentNode: বর্তমান নোডের প্যারেন্ট নোড খুঁজে বের করে।
- childNodes: কোন নোডের সব চাইল্ড নোডের তালিকা পাওয়া যায় (এলিমেন্ট, টেক্সট, কমেন্টসহ)।
- children: শুধুমাত্র এলিমেন্ট টাইপের চাইল্ড নোড গুলো পাওয়া যায়।
- firstChild, lastChild: প্রথম এবং শেষ চাইল্ড নোড পাওয়া যায়।
- firstElementChild, lastElementChild: প্রথম এবং শেষ এলিমেন্ট চাইল্ড পাওয়া যায়।
- nextSibling, previousSibling: একই প্যারেন্টের পরবর্তী বা পূর্ববর্তী নোড খুঁজে পাওয়া যায়।
- nextElementSibling, previousElementSibling: টেক্সট নোড বাদ দিয়ে পরবর্তী বা পূর্ববর্তী এলিমেন্ট খুঁজে পাওয়া যায়।
2️⃣ DOM Traversing এর উদাহরণ ও বিশদ ব্যাখ্যা
নিচে একটি ছোট HTML এবং JavaScript উদাহরণ দেওয়া হলো যা DOM ট্রাভার্সের বিভিন্ন মেথড দেখায়:
<div id="container">
<h2>DOM Traversing Example</h2>
<p>এটি প্রথম প্যারাগ্রাফ।</p>
<p id="middle">এটি মাঝের প্যারাগ্রাফ।</p>
<p>এটি শেষ প্যারাগ্রাফ।</p>
</div>
// container ডিভ নির্বাচন
let container = document.getElementById(“container”);
// middle প্যারাগ্রাফ নির্বাচন
let middlePara = document.getElementById(“middle”);
console.log(“Parent Node of middlePara:”, middlePara.parentNode.id);
console.log(“Child nodes of container:”, container.childNodes);
console.log(“Children elements of container:”, container.children);
console.log(“First child node:”, container.firstChild.nodeName);
console.log(“First element child:”, container.firstElementChild.tagName);
console.log(“Last child node:”, container.lastChild.nodeName);
console.log(“Last element child:”, container.lastElementChild.tagName);
console.log(“Next sibling node:”, middlePara.nextSibling.nodeName);
console.log(“Next element sibling:”, middlePara.nextElementSibling.tagName);
console.log(“Previous sibling node:”, middlePara.previousSibling.nodeName);
console.log(“Previous element sibling:”, middlePara.previousElementSibling.tagName);
// practical: middle প্যারাগ্রাফের পরের এলিমেন্ট প্যারাগ্রাফের টেক্সট পরিবর্তন
middlePara.nextElementSibling.textContent = “এই প্যারাগ্রাফটিও পরিবর্তিত হয়েছে!”;
</script>
ব্যাখ্যা:
parentNodeদিয়ে middle প্যারাগ্রাফের প্যারেন্ট ডিভ পাওয়া গেছে।childNodesসব নোড দেখায় (টেক্সট নোড, কমেন্ট সহ)।childrenশুধু এলিমেন্ট টাইপ চাইল্ড নোড দেখায়।firstChildএবংlastChildনোডের নাম দেখায়, যা টেক্সট নোডও হতে পারে।firstElementChildএবংlastElementChildশুধুমাত্র এলিমেন্টের নাম দেখায়।nextSiblingওpreviousSiblingটেক্সট নোডসহ নোড দেখায়, আরnextElementSibling,previousElementSiblingশুধুমাত্র এলিমেন্ট নোড।- শেষে, আমরা middle প্যারাগ্রাফের পরের এলিমেন্টের টেক্সট পরিবর্তন করেছি।
3️⃣ DOM Traversing এর ব্যবহারিক গুরুত্ব
DOM ট্রাভার্সিং এর মাধ্যমে আপনি ওয়েবপেজের যেকোনো এলিমেন্টকে পছন্দমত খুঁজে বের করে, পরিবর্তন করতে পারেন। যেমন:
- কোনো নির্দিষ্ট এলিমেন্টের প্যারেন্ট বা চাইল্ড এলিমেন্ট খোঁজা।
- সিবলিং এলিমেন্ট গুলো নিয়ে কাজ করা।
- ইভেন্ট হ্যান্ডলার যোগ করার জন্য নির্দিষ্ট এলিমেন্ট নির্বাচন।
- ডায়নামিক ভাবে DOM এর কাঠামো পরিবর্তন।
- AJAX এর মাধ্যমে ডায়নামিক কন্টেন্ট লোড করা।
DOM Traversing ছাড়া ওয়েব ডেভেলপমেন্টে ইন্টার্যাকটিভ এবং ডায়নামিক UI তৈরি কঠিন হয়ে পড়ে। তাই এটা ভালোভাবে আয়ত্ত করা প্রয়োজন।
4️⃣ সারমর্ম
এই টিউটোরিয়ালে আমরা শিখেছি JavaScript দিয়ে DOM Traversing কীভাবে করতে হয়, কী কী মেথড ব্যবহার করা হয় এবং সেগুলোর পার্থক্য কী। DOM এর বিভিন্ন নোড ও এলিমেন্টের মধ্যে যাতায়াতের মাধ্যমে ওয়েবপেজের কাঠামো পরিবর্তন, ডায়নামিক কন্টেন্ট তৈরি করা যায়।
এই জ্ঞান আপনার JavaScript দক্ষতাকে আরো উন্নত করবে এবং ওয়েব ডেভেলপমেন্টে নতুন সুযোগ সৃষ্টি করবে।