JavaScript HTML DOM Navigation – সম্পূর্ণ বাংলা টিউটোরিয়াল
JavaScript HTML DOM Navigation হচ্ছে এমন একটি কৌশল যার মাধ্যমে আপনি HTML ডকুমেন্টের মধ্যে বিভিন্ন উপাদান (element) এর parent, child এবং sibling গুলোকে এক্সেস বা খুঁজে বের করতে পারেন। ওয়েব ডেভেলপমেন্টে অনেক সময় আমাদের একটি নির্দিষ্ট এলিমেন্টের আশেপাশের অন্য এলিমেন্টে কাজ করার প্রয়োজন হয়। তখন এই DOM Navigation জিনিসটা কাজে আসে।
DOM Navigation মানে কী?
DOM Navigation এর অর্থ হলো একটি নির্দিষ্ট এলিমেন্টের মাধ্যমে তার parent, child, অথবা sibling উপাদানে পৌঁছানো। এতে আমরা একটি এলিমেন্টের সাথে সম্পর্কিত অন্যান্য এলিমেন্ট খুঁজে পেতে পারি, এবং সেগুলোর উপর JavaScript দিয়ে কাজ করতে পারি।
একটি পূর্ণাঙ্গ উদাহরণ
নিচের কোডটি একটি DOM Structure তৈরি করে যেখানে একটি div এর মধ্যে ৩টি p ট্যাগ রয়েছে। JavaScript ব্যবহার করে আমরা parent, child, এবং sibling এলিমেন্টগুলোতে কাজ করবো।
<h2>JavaScript HTML DOM Navigation উদাহরণ</h2>
<div id="mainDiv">
<p>এইটা প্রথম প্যারাগ্রাফ।</p>
<p>এইটা দ্বিতীয় প্যারাগ্রাফ।</p>
<p>এইটা তৃতীয় প্যারাগ্রাফ।</p>
</div>
function navigateDOM() {
// প্যারেন্ট ডিভকে ধরছি
let main = document.getElementById(“mainDiv”);
let firstChild = main.firstElementChild;
alert(” প্রথম প্যারাগ্রাফ: ” + firstChild.innerText);
let lastChild = main.lastElementChild;
alert(” শেষ প্যারাগ্রাফ: ” + lastChild.innerText);
let secondPara = firstChild.nextElementSibling;
let thirdPara = secondPara.nextElementSibling;
alert(“➡️ দ্বিতীয় প্যারার পর: ” + thirdPara.innerText);
let prev = thirdPara.previousElementSibling;
alert(“⬅️ তৃতীয় প্যারার আগের: ” + prev.innerText);
let parent = secondPara.parentElement;
alert(” প্যারেন্ট ট্যাগ: ” + parent.tagName);
}
</script>
গুরুত্বপূর্ণ DOM Navigation Properties
নিচের টেবিলে কিছু গুরুত্বপূর্ণ DOM Navigation প্রপার্টির তালিকা দেয়া হলো:
| Property | ব্যাখ্যা (বাংলা) |
|---|---|
| parentElement | উক্ত এলিমেন্টের প্যারেন্ট এলিমেন্ট |
| firstElementChild | প্রথম চাইল্ড এলিমেন্ট |
| lastElementChild | শেষ চাইল্ড এলিমেন্ট |
| nextElementSibling | পরবর্তী একই লেভেলের এলিমেন্ট |
| previousElementSibling | পূর্ববর্তী একই লেভেলের এলিমেন্ট |
টিপস
- DOM Tree বুঝতে পারলে নেভিগেশন আরও সহজ হবে।
- console.log() ব্যবহার করে DOM structure ভালোভাবে দেখতে পারেন।
- ভুল হলে JavaScript error console দেখে সমস্যা চিহ্নিত করুন।
- DOM Navigation ডায়নামিক HTML ম্যানিপুলেশনের জন্য খুবই উপকারী।
উপসংহার
JavaScript DOM Navigation শেখা প্রতিটি ওয়েব ডেভেলপারের জন্য অপরিহার্য। এটি HTML structure-এর সাথে প্রোগ্রাম্যাটিকভাবে কাজ করার একটি শক্তিশালী উপায়। এই টিউটোরিয়ালে আপনি শিখেছেন কিভাবে firstElementChild, lastElementChild, parentElement, nextElementSibling এবং previousElementSibling ব্যবহার করে একটি এলিমেন্টের আশেপাশের DOM উপাদানগুলোতে অ্যাক্সেস করা যায়।
এখন আপনি নিজেই HTML পেজ তৈরি করে এই নেভিগেশনগুলো প্রাকটিস করতে পারেন এবং আপনার ওয়েবসাইটে ডায়নামিক ফিচার যুক্ত করতে পারেন!