JavaScript Bangla Tutorial-38 : Dom Traversing & Manipulating
জাভাস্ক্রিপ্টের ডম ট্রাভার্সিং এবং ম্যানিপুলেটিং সম্পর্কিত বিস্তারিত বাংলা টিউটোরিয়াল এই অংশে প্রকাশিত হয়েছে। জাভাস্ক্রিপ্টে ডম ট্রাভার্সিং এবং ম্যানিপুলেটিং ব্যবহার করে ওয়েব পৃষ্ঠার উপাদানগুলি নেভিগেট এবং পরিবর্তন করা যায়। এই টিউটোরিয়ালে আপনি বিভিন্ন প্রয়োজনীয় টেকনিক এবং পদ্ধতিগুলি শেখার সুযোগ পাবেন।
JavaScript Bangla Tutorial-38 : Dom Traversing & Manipulating
প্রথমিক বিষয়সমূহ
1. ডম ট্রাভার্সিং কি?
ডম ট্রাভার্সিং হল ওয়েব পৃষ্ঠার উপাদানগুলির উপর পথ পরিবর্তন করা এবং তথ্য নেওয়ার পদ্ধতি। জাভাস্ক্রিপ্টের ডম ট্রাভার্সিং ব্যবহার করে আপনি ওয়েব পৃষ্ঠার উপাদানগুলির সাথে ইন্ট্যার্যাকশন করতে পারেন।
2. ডম ম্যানিপুলেটিং কি?
ডম ম্যানিপুলেটিং হল ওয়েব পৃষ্ঠার উপাদানগুলির আকার, স্থান বা অন্যান্য পরিবর্তন করা। জাভাস্ক্রিপ্টের ডম ম্যানিপুলেটিং ব্যবহার করে আপনি ওয়েব পৃষ্ঠার উপাদানগুলির সাথে পরিবর্তন করতে পারেন।
ডম ট্রাভার্সিং
1. পারেন্ট নোডে যাওয়া (প্রথম পোস্ট)
পারেন্ট নোডে যাওয়া একটি গুরুত্বপূর্ণ ডম ট্রাভার্সিং কর্ম। পারেন্ট নোড হল একটি উপাদানের উপরের নোড। এই টেকনিকটি ব্যবহার করে আপনি একটি উপাদানের পারেন্ট নোডটি নির্দিষ্ট করতে পারেন।
উদাহরণঃ
const childNode = document.getElementById("child");
const parentNode = childNode.parentNode;এখানে "child" আইডিতে উপাদানটি নির্দিষ্ট করা হয়েছে। getElementById মেথডটি ব্যবহার করে উপাদানের নোডটি পানেন এবং parentNode প্রপার্টিতে পারেন্ট নোডটি প্রাপ্ত করতে পারেন।
2. প্রথম সন্তানে যাওয়া
প্রথম সন্তানে যাওয়া একটি ডম ট্রাভার্সিং কর্মপরিকর। প্রথম সন্তান হল একটি উপাদানের প্রথম সন্তান নোড। এই টেকনিকটি ব্যবহার করে আপনি একটি উপাদানের প্রথম সন্তান নোডটি নির্দিষ্ট করতে পারেন।
উদাহরণঃ
const parentNode = document.getElementById("parent");
const firstChild = parentNode.firstChild;এখানে "parent" আইডিতে প্যারেন্ট উপাদানটি নির্দিষ্ট করা হয়েছে। getElementById মেথডটি ব্যবহার করে প্যারেন্ট নোডটি পানেন এবং firstChild প্রপার্টিতে প্রথম সন্তান নোডটি প্রাপ্ত করতে পারেন।
3. প্রথম সন্তানের পরবর্তী সন্তানে যাওয়া
প্রথম সন্তানের পরবর্তী সন্তানে যাওয়া একটি ডম ট্রাভার্সিং কর্মপরিকর। প্রথম সন্তানের পরবর্তী সন্তান হল প্রথম সন্তানের পরের উপাদানের নোড। এই টেকনিকটি ব্যবহার করে আপনি একটি উপাদানের প্রথম সন্তানের পরবর্তী সন্তান নোডটি নির্দিষ্ট করতে পারেন।
উদাহরণঃ
const firstChild = document.getElementById("first-child");
const nextSibling = firstChild.nextSibling;এখানে "first-child" আইডিতে প্রথম সন্তানের নোডটি নির্দিষ্ট করা হয়েছে। getElementById মেথডটি ব্যবহার করে প্রথম সন্তানের নোডটি পানেন এবং nextSibling প্রপার্টিতে প্রথম সন্তানের পরবর্তী সন্তান নোডটি প্রাপ্ত করতে পারেন।
ডম ম্যানিপুলেটিং
1. উপাদান সৃষ্টি করা
জাভাস্ক্রিপ্টের ডম ম্যানিপুলেটিং দিয়ে আপনি ওয়েব পৃষ্ঠার উপাদানগুলি সৃষ্টি করতে পারেন। উপাদান সৃষ্টি করার জন্য আপনি createElement মেথডটি ব্যবহার করতে পারেন।
উদাহরণঃ
const parent = document.getElementById("parent");
const newElement = document.createElement("div");
newElement.innerText = "এটি নতুন উপাদান";
parent.appendChild(newElement);এখানে "parent" আইডিতে প্যারেন্ট উপাদানটি নির্দিষ্ট করা হয়েছে। getElementById মেথডটি ব্যবহার করে প্যারেন্ট নোডটি পানেন। তারপরে createElement মেথড দিয়ে নতুন একটি উপাদান সৃষ্টি করেন এবং innerText প্রপার্টি দিয়ে উপাদানের মধ্যে টেক্সট সেট করেন। শেষে appendChild মেথড ব্যবহার করে নতুন উপাদানটি প্যারেন্ট উপাদানের ভিতরে যুক্ত করেন।
2. উপাদান মুছে ফেলা
জাভাস্ক্রিপ্টের ডম ম্যানিপুলেটিং দিয়ে আপনি ওয়েব পৃষ্ঠার উপাদানগুলি মুছে ফেলতে পারেন। উপাদান মুছে ফেলতে হলে আপনি প্যারেন্ট নোডের মধ্যে থাকতে হবে এবং removeChild মেথডটি ব্যবহার করতে পারেন।
উদাহরণঃ
const parent = document.getElementById("parent");
const child = document.getElementById("child");
parent.removeChild(child);এখানে "parent" আইডিতে প্যারেন্ট নোডটি নির্দিষ্ট করা হয়েছে এবং "child" আইডিতে উপাদানের নোডটি নির্দিষ্ট করা হয়েছে। getElementById মেথডটি ব্যবহার করে প্যারেন্ট নোড এবং উপাদান নোড পানেন। তারপরে removeChild মেথডটি ব্যবহার করে প্যারেন্ট নোড থেকে উপাদান নোডটি মুছে ফেলেন।
JavaScript Bangla Tutorial-38 : Dom Traversing & Manipulating
পরিসংখ্যান
জাভাস্ক্রিপ্টে ডম ট্রাভার্সিং এবং ম্যানিপুলেটিং ব্যবহার করে ওয়েব পৃষ্ঠার উপাদানগুলি নেভিগেট এবং পরিবর্তন করা যায়। এই টিউটোরিয়ালে আমরা জাভাস্ক্রিপ্টে ডম ট্রাভার্সিং এবং ম্যানিপুলেটিং নিয়ে বিস্তারিত আলোচনা করেছি। এই টিউটোরিয়ালটি মহান প্রয়োজনীয় টেকনিক এবং পদ্ধতিগুলি শেখার জন্য আপনাকে সমর্পিত করা হয়। ডম ট্রাভার্সিং এবং ম্যানিপুলেটিং শিখে আপনি ওয়েব উপাদানগুলি দক্ষতার সাথে নেভিগেট এবং পরিবর্তন করতে পারবেন।
JavaScript Bangla Tutorial-38 : Dom Traversing & Manipulating
Frequently Asked Questions (FAQs)
উত্তর: ডম ট্রাভার্সিং হল ওয়েব পৃষ্ঠার উপাদানগুলির উপর পথ পরিবর্তন করা এবং তথ্য নেওয়ার পদ্ধতি। জাভাস্ক্রিপ্টের ডম ট্রাভার্সিং ব্যবহার করে আপনি ওয়েব পৃষ্ঠার উপাদানগুলির সাথে ইন্ট্যার্যাকশন করতে পারেন।
উত্তর: ডম ম্যানিপুলেটিং হল ওয়েব পৃষ্ঠার উপাদানগুলির আকার, স্থান বা অন্যান্য পরিবর্তন করা। জাভাস্ক্রিপ্টের ডম ম্যানিপুলেটিং ব্যবহার করে আপনি ওয়েব পৃষ্ঠার উপাদানগুলির সাথে পরিবর্তন করতে পারেন।
উত্তর: আপনি createElement মেথডটি ব্যবহার করে নতুন একটি উপাদান সৃষ্টি করতে পারেন। উপাদান সৃষ্টির পরে আপনি প্রয়োজনীয় বৈশিষ্ট্য সেট করতে পারেন এবং তারপরে সেটা প্যারেন্ট উপাদানের ভিতরে যুক্ত করতে পারেন।
