JavaScript Bangla Tutorial-34: Dom | Select Html Elements

JavaScript Bangla Tutorial-34: Dom | Select Html Elements

জাভাস্ক্রিপ্টের মাধ্যমে ওয়েব ডেভেলপমেন্ট এখন একটি অত্যন্ত গুরুত্বপূর্ণ বিষয় হয়ে উঠেছে। ওয়েব পৃষ্ঠাগুলির প্রাকৃতিক দৃশ্যমান অংশগুলি পরিবর্তন করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা হয়। এটি ওয়েব ডেভেলপারদের কাজক্ষমতা বৃদ্ধি করে এবং ওয়েব পৃষ্ঠাগুলির পাশাপাশি নির্দিষ্ট উপাদানগুলি নির্বাচন করার সুযোগ প্রদান করে।

JavaScript Bangla Tutorial-34: Dom | Select Html Elements

জাভাস্ক্রিপ্টে ডম (ডকুমেন্ট অবজেক্ট মডেল) হল একটি প্রোগ্রামিং ইন্টারফেস, যা ওয়েব পেজের প্রাকৃতিক পরিবেশগুলির জন্য প্রোগ্রামারদেরকে সরবরাহ করে। ডম দ্বারা আপনি ওয়েব পৃষ্ঠাগুলির সম্পূর্ণ সংজ্ঞা, বৈশিষ্ট্য, এবং উপাদানগুলির সাথে ইন্ট্যার্যাকশন করতে পারেন। এটি ওয়েব ডেভেলপমেন্টে খুবই গুরুত্বপূর্ণ একটি কনসেপ্ট, যা আপনাকে ওয়েব পৃষ্ঠায় উপাদানগুলি নির্বাচন এবং পরিবর্তন করার সুযোগ দেয়।

কেন ডম গুরুত্বপূর্ণ?

ওয়েব পৃষ্ঠাগুলি কোন না কোন উপাদানের সংগ্রহশালা। এই উপাদানগুলির মধ্যে আছে টেক্সট, ইমেজ, বাটন, লিঙ্ক, ইত্যাদি। ওয়েব ডেভেলপারদের কাজ হলো এই উপাদানগুলি পরিবর্তন করে দ্বারা ওয়েব পৃষ্ঠায় ইন্টারয়েকশন সৃষ্টি করা। এইয়ে ডম এসে দাঁড়িয়ে থাকে। ডম পাশাপাশি সম্পূর্ণ ওয়েব পৃষ্ঠার প্রাকৃতিক সংজ্ঞা, বৈশিষ্ট্য এবং উপাদানগুলির তথ্য সরবরাহ করে। আর জাভাস্ক্রিপ্টের মাধ্যমে আপনি এই ডম সম্পর্কিত কাজগুলি করতে পারেন।

ডম এলিমেন্ট নির্বাচন করা

জাভাস্ক্রিপ্টে ডম এলিমেন্ট নির্বাচন করার জন্য আপনি document.querySelector() বা document.querySelectorAll() মেথড ব্যবহার করতে পারেন।

• document.querySelector() একটি উপাদান নির্বাচন করবে মাত্র প্রথম উপাদান।
• document.querySelectorAll() একটি নোড লিস্ট নির্বাচন করবে সমস্ত উপাদানের জন্য।

একটি উপাদান নির্বাচন করার জন্য, আপনার নিবন্ধে নীচের ধাপগুলি অনুসরণ করতে হবে:

const element = document.querySelector('selector');

উদাহরণস্বরূপ, যদি আপনি ওয়েব পৃষ্ঠার শিরোনাম বাটনের জন্য এলিমেন্ট নির্বাচন করতে চান, তবে আপনি নিচের মতো করে কোড লিখতে পারেন:

const button = document.querySelector('.button');

এখানে, .button হলো শিরোনাম বাটনের সিলেক্টর। আপনি অনুগ্রহ করে উপযুক্ত সিলেক্টর ব্যবহার করে আপনার ইচ্ছিত উপাদান নির্বাচন করতে পারেন।

এলিমেন্টের প্রপার্টি অ্যাক্সেস করা

ডম এলিমেন্টের প্রপার্টিগুলির তথ্য অ্যাক্সেস করতে আপনি ডট নোটেশন (.) ব্যবহার করতে পারেন। এটি আপনাকে এলিমেন্টের সমস্ত বৈশিষ্ট্য এবং মেথডের সাথে ইন্টারঅ্যাক্ট করতে সহায়তা করে।

const element = document.querySelector('selector');
const property = element.property;

উদাহরণস্বরূপ, যদি আপনি শিরোনাম বাটনের বাটন মান অ্যাক্সেস করতে চান, তবে নীচের মতো কোড লিখতে পারেন:

const button = document.querySelector('.button');
const buttonText = button.textContent;
console.log(buttonText);

এখানে, .button হলো শিরোনাম বাটনের সিলেক্টর। textContent প্রপার্টি হলো এলিমেন্টের টেক্সট মান। উদাহরণটির ফলাফল হলো বাটনের মান কনসোলে প্রিন্ট হবে।

এলিমেন্টের মধ্যে টেক্সট পরিবর্তন করা

জাভাস্ক্রিপ্টে ডম এলিমেন্টের টেক্সট পরিবর্তন করার জন্য আপনি textContent প্রপার্টি ব্যবহার করতে পারেন। এটি আপনাকে টেক্সট সেট করতে এবং পূর্ববর্তী টেক্সটকে পরিবর্তন করতে সহায়তা করে।

const element = document.querySelector('selector');
element.textContent = 'new text';

উদাহরণস্বরূপ, যদি আপনি শিরোনাম বাটনের টেক্সট পরিবর্তন করতে চান, তবে আপনি নিচের মতো কোড লিখতে পারেন:

const button = document.querySelector('.button');
button.textContent = 'Click Here';

এখানে, .button হলো শিরোনাম বাটনের সিলেক্টর। textContent প্রপার্টি ব্যবহার করে আপনি বাটনের টেক্সট পরিবর্তন করতে পারেন।

এলিমেন্টে নতুন এলিমেন্ট যোগ করা

জাভাস্ক্রিপ্টে ডম এলিমেন্টে নতুন উপাদান যোগ করার জন্য আপনি document.createElement() এবং element.appendChild() মেথড ব্যবহার করতে পারেন।

• document.createElement() একটি নতুন এলিমেন্ট তৈরি করবে।
• element.appendChild() পূর্বনির্ধারিত এলিমেন্টে নতুন এলিমেন্টটি সংযোগ করবে।

const element = document.createElement('tag');
parentElement.appendChild(element);

উদাহরণস্বরূপ, যদি আপনি একটি নতুন প্যারাগ্রাফ এলিমেন্ট তৈরি করে তা কোডের সর্বোচ্চ উপরে সংযোগ করতে চান, তবে আপনি নিচের মতো কোড লিখতে পারেন:

const paragraph = document.createElement('p');
const parentElement = document.querySelector('.container');
parentElement.appendChild(paragraph);

এখানে, p হলো প্যারাগ্রাফ এলিমেন্টের ট্যাগ। .container হলো প্যারাগ্রাফ এলিমেন্টটি যোগ করতে চানো সন্নিবেশভুক্ত উপাদানের সিলেক্টর।

এলিমেন্ট অপসারণ করা

জাভাস্ক্রিপ্টে ডম এলিমেন্ট অপসারণ করার জন্য আপনি element.remove() মেথড ব্যবহার করতে পারেন।

const element = document.querySelector('selector');
element.remove();

উদাহরণস্বরূপ, যদি আপনি একটি প্যারাগ্রাফ এলিমেন্টটি অপসারণ করতে চান, তবে নীচের মতো কোড লিখতে পারেন:

const paragraph = document.querySelector('.paragraph');
paragraph.remove();

এখানে, .paragraph হলো প্যারাগ্রাফ এলিমেন্টের সিলেক্টর। remove() মেথড ব্যবহার করে আপনি প্যারাগ্রাফ এলিমেন্টটি অপসারণ করতে পারেন।

এলিমেন্টে ক্লাস অ্যাড করা

ডম এলিমেন্টে ক্লাস অ্যাড করার জন্য আপনি element.classList.add() মেথড ব্যবহার করতে পারেন।

const element = document.querySelector('selector');
element.classList.add('class-name');

উদাহরণস্বরূপ, যদি আপনি একটি প্যারাগ্রাফ এলিমেন্টের জন্য একটি নতুন ক্লাস যোগ করতে চান, তবে নীচের মতো কোড লিখতে পারেন:

const paragraph = document.querySelector('.paragraph');
paragraph.classList.add('highlight');

এখানে, .paragraph হলো প্যারাগ্রাফ এলিমেন্টের সিলেক্টর। highlight হলো নতুন ক্লাস যা আপনি প্যারাগ্রাফ এলিমেন্টে যোগ করতে চান।

এলিমেন্টে ইভেন্ট হ্যান্ডল করা

ডম এলিমেন্টের উপর ক্লিক বা অন্য কোন ইভেন্ট সংঘটিত হলে, আপনি জাভাস্ক্রিপ্টের মাধ্যমে সেই ইভেন্টের হ্যান্ডলার ফাংশন বা কোড নির্ধারণ করতে পারেন।

const element = document.querySelector('selector');
element.addEventListener('event', handler);

উদাহরণস্বরূপ, যদি আপনি একটি বাটনের উপর ক্লিক ইভেন্ট নির্ধারণ করতে চান, তবে নীচের মতো কোড লিখতে পারেন:

const button = document.querySelector('.button');
button.addEventListener('click', handleClick);

এখানে, .button হলো বাটনের সিলেক্টর। click হলো ক্লিক ইভেন্ট, এবং handleClick হলো ক্লিক ইভেন্টের হ্যান্ডলার ফাংশন। আপনি আপনার পছন্দসই ফাংশন নির্বাচন করতে পারেন এবং তা কখনো ক্লিক ইভেন্ট সংঘটিত হলে কল হবে।

এই জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়ালে আপনি শিখবেন কিভাবে জাভাস্ক্রিপ্টের মাধ্যমে HTML উপাদানগুলি নির্বাচন করতে হয়। আমরা জানবো ডকুমেন্ট অবজেক্ট মডেল (DOM) এবং জাভাস্ক্রিপ্টের বিভিন্ন পদ্ধতিসমূহ ব্যবহার করে কিভাবে ওয়েব পৃষ্ঠায় উপাদানগুলি পরিবর্তন করা যায়। এই বাংলা টিউটোরিয়ালে আপনি একজন অভিজ্ঞতা অর্জন করবেন এবং জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল-34: ডম | এলিমেন্ট নির্বাচন বিষয়ে পেশাদার হবেন।

Frequently Asked Questions (FAQs)

কি করে জাভাস্ক্রিপ্ট ডম এলিমেন্ট নির্বাচন করবেন?

জাভাস্ক্রিপ্টে ডম এলিমেন্ট নির্বাচন করতে আপনি document.querySelector() এবং document.querySelectorAll() মেথড ব্যবহার করতে পারেন। প্রথম মেথডটি একটি উপাদান নির্বাচন করবে এবং দ্বিতীয় মেথডটি সমস্ত উপাদানের জন্য নোড লিস্ট নির্বাচন করবে।

কিভাবে জাভাস্ক্রিপ্টে ডম এলিমেন্টের প্রপার্টি অ্যাক্সেস করবেন?

জাভাস্ক্রিপ্টে ডম এলিমেন্টের প্রপার্টিগুলির তথ্য অ্যাক্সেস করতে আপনি ডট নোটেশন (.) ব্যবহার করতে পারেন। এটি আপনাকে এলিমেন্টের সমস্ত বৈশিষ্ট্য এবং মেথডের সাথে ইন্টারঅ্যাক্ট করতে সহায়তা করে।

কিভাবে জাভাস্ক্রিপ্টে ডম এলিমেন্টে নতুন এলিমেন্ট যোগ করবেন?

জাভাস্ক্রিপ্টে ডম এলিমেন্টে নতুন উপাদান যোগ করার জন্য আপনি document.createElement() এবং element.appendChild() মেথড ব্যবহার করতে পারেন। document.createElement() একটি নতুন এলিমেন্ট তৈরি করবে এবং element.appendChild() পূর্বনির্ধারিত এলিমেন্টে নতুন এলিমেন্টটি সংযোগ করবে।

কিভাবে জাভাস্ক্রিপ্টে ডম এলিমেন্ট অপসারণ করবেন?

জাভাস্ক্রিপ্টে ডম এলিমেন্ট অপসারণ করতে আপনি element.remove() মেথড ব্যবহার করতে পারেন। এটি প্রস্তাবিত এলিমেন্টটি অপসারণ করবে।

কিভাবে জাভাস্ক্রিপ্টে ডম এলিমেন্টে ক্লাস অ্যাড করবেন?

জাভাস্ক্রিপ্টে ডম এলিমেন্টে ক্লাস অ্যাড করতে আপনি element.classList.add() মেথড ব্যবহার করতে পারেন। এটি আপনাকে এলিমেন্টে একটি নতুন ক্লাস যোগ করতে সহায়তা করে।

কিভাবে জাভাস্ক্রিপ্টে ডম এলিমেন্টে ইভেন্ট হ্যান্ডল করবেন?

জাভাস্ক্রিপ্টে ডম এলিমেন্টে ইভেন্ট হ্যান্ডল করতে আপনি element.addEventListener() মেথড ব্যবহার করতে পারেন। এটি বোতাম অথবা অন্য ইভেন্টের হ্যান্ডলার ফাংশন নির্ধারণ করতে ব্যবহৃত হয়।