JavaScript Bangla Tutorial-37: Find, Create, Add, Remove Html Elements

JavaScript Bangla Tutorial-37: Find, Create, Add, Remove Html Elements

জাভাস্ক্রিপ্ট একটি প্রোগ্রামিং ভাষা যা ওয়েব ডেভেলপমেন্টে ব্যবহার হয়। জাভাস্ক্রিপ্ট ব্যবহার করে আপনি দক্ষতা উন্নত করতে পারেন এবং ওয়েব অ্যাপ্লিকেশন নির্মাণ করতে পারেন। এই টিউটোরিয়ালে আমরা JavaScript Bangla Tutorial-37 এ আপনাকে এইচটিএমএল উপাদান খুঁজে বের করার, তৈরি করার, যুক্ত করার, এবং সরানের প্রক্রিয়াটি সম্পূর্ণরূপে শেখাব। আপনি এই টিউটোরিয়ালটি ধাপে ধাপে অনুসরণ করে এইচটিএমএল উপাদান সম্পর্কিত আপনার জ্ঞান বৃদ্ধি করতে পারবেন।

এইচটিএমএল উপাদান খুঁজুন

এইচটিএমএল ডকুমেন্টে উপাদানগুলি সন্ধান করা জরুরি হতে পারে। জাভাস্ক্রিপ্ট দিয়ে আমরা এইচটিএমএল উপাদানগুলি খুঁজে বের করতে পারি এবং এই উপাদানগুলি পরিচালনা করতে পারি। এইচটিএমএল উপাদান সন্ধানের জন্য আমরা querySelector() ফাংশন ব্যবহার করি।

উপাদান বিচ্ছিন্ন করুন

এইচটিএমএল ডকুমেন্টের মধ্যে একটি উপাদান বিচ্ছিন্ন করতে চাইলে আমরা উপাদানের সিলেক্টর ব্যবহার করি। উপাদানের সিলেক্টর দিয়ে আমরা querySelector() ফাংশনটি ব্যবহার করে মূল উপাদানটি বিচ্ছিন্ন করতে পারি।

উদাহরণঃ

const element = document.querySelector('.my-element');
element.remove();

এখানে .my-element হল উপাদানের সিলেক্টর। querySelector() ফাংশনটি সিলেক্টরের মাধ্যমে উপাদানটি বের করে এবং remove() ফাংশনটি ব্যবহার করে উপাদানটি বিচ্ছিন্ন করে ফেলেন।

তালিকা তৈরি করুন

জাভাস্ক্রিপ্ট ব্যবহার করে আমরা এইচটিএমএল উপাদানের মধ্যে নতুন উপাদান তৈরি করতে পারি। তালিকা তৈরি করার জন্য আমরা createElement() ফাংশন ব্যবহার করি এবং উপাদানটি যুক্ত করতে appendChild() ফাংশনটি ব্যবহার করি।

উদাহরণঃ

const list = document.createElement('ul');
const listItem = document.createElement('li');
listItem.textContent = 'প্রথম আইটেম';
list.appendChild(listItem);

এখানে আমরা createElement() ফাংশনটি ব্যবহার করে একটি <ul> তালিকা উপাদান তৈরি করেছি। এরপরে আমরা createElement() ফাংশনটি ব্যবহার করে একটি <li> উপাদান তৈরি করেছি এবং উপাদানটির টেক্সট ভ্যালুকে 'প্রথম আইটেম' এসাইন করেছি। শেষে আমরা appendChild() ফাংশনটি ব্যবহার করে তালিকা উপাদানের মধ্যে উপাদানটি যুক্ত করেছি।

অধিক উপাদান সংযোজন করুন

একটি উপাদানের মধ্যে অধিক উপাদান সংযোজন করতে আমরা সংযোগকারী উপাদানের সিলেক্টর ব্যবহার করি। এইচটিএমএল উপাদানে অধিক উপাদান যুক্ত করার জন্য আমরা insertBefore() ফাংশন ব্যবহার করি।

উদাহরণঃ

const parentElement = document.querySelector('.parent');
const newElement = document.createElement('div');
const existingElement = document.querySelector('.existing');
parentElement.insertBefore(newElement, existingElement);

উপরের উদাহরণে, আমরা .parent ক্লাসের উপাদানটি সিলেক্ট করেছি যার মধ্যে নতুন উপাদানটি সংযোজিত হবে। তারপরে আমরা createElement() ফাংশনটি ব্যবহার করে নতুন উপাদানটি তৈরি করেছি। আর শেষে .existing ক্লাসের উপাদানটি সিলেক্ট করে এবং insertBefore() ফাংশনটি ব্যবহার করে নতুন উপাদানটি অধিক উপাদান হিসেবে সংযোজিত করেছি।

এইচটিএমএল উপাদান তৈরি করুন

জাভাস্ক্রিপ্ট ব্যবহার করে আমরা এইচটিএমএল উপাদানগুলি তৈরি করতে পারি। উপাদানের জন্য আমরা একটি টেমপ্লেট স্ট্রিং ব্যবহার করি এবং এইচটিএমএল কোড লেখার মাধ্যমে উপাদানটি তৈরি করি।

উদাহরণঃ

const name = 'John Doe';
const age = 25;

const html = `
  

    
${name}
    
${age} years old
  
`;

উপরের উদাহরণে, আমরা name এবং age ভ্যারিয়েবলগুলির মান ব্যবহার করে একটি HTML উপাদান তৈরি করেছি। টেমপ্লেট স্ট্রিং দ্বারা আমরা ভ্যারিয়েবলগুলির মান উপাদানের ভিতরে বসিয়েছি। এভাবে জাভাস্ক্রিপ্ট দিয়ে আপনি প্রয়োজনীয় HTML কোড লেখার মাধ্যমে উপাদানগুলি তৈরি করতে পারেন।

এইচটিএমএল উপাদান যুক্ত করুন

জাভাস্ক্রিপ্ট ব্যবহার করে আমরা একটি উপাদানের নিচে নতুন উপাদান সংযোজিত করতে পারি। উপাদানের নিচে নতুন উপাদান যুক্ত করার জন্য আমরা appendChild() ফাংশনটি ব্যবহার করি।

উদাহরণঃ

const parentElement = document.querySelector('.parent');
const newElement = document.createElement('div');
parentElement.appendChild(newElement);

উপরের উদাহরণে, আমরা .parent ক্লাসের উপাদানটি সিলেক্ট করেছি যার নিচে নতুন উপাদানটি যুক্ত হবে। তারপরে আমরা createElement() ফাংশনটি ব্যবহার করে নতুন উপাদানটি তৈরি করেছি এবং appendChild() ফাংশনটি ব্যবহার করে নতুন উপাদানটি মূল উপাদানের নিচে যুক্ত করেছি।

এইচটিএমএল উপাদান সরান

জাভাস্ক্রিপ্ট ব্যবহার করে আমরা একটি উপাদান সরাতে পারি। উপাদান সরাতে আমরা remove() ফাংশন ব্যবহার করি।

উদাহরণঃ

const element = document.querySelector('.my-element');
element.remove();

উপরের উদাহরণে, .my-element ক্লাসের উপাদানটি সিলেক্ট করেছি এবং remove() ফাংশনটি ব্যবহার করে উপাদানটি সরানো হয়েছে।

Frequently Asked Questions (FAQs)

কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল উপাদানগুলি খুঁজব?

জাভাস্ক্রিপ্টের querySelector() ফাংশন ব্যবহার করে আপনি এইচটিএমএল উপাদানগুলি সন্ধান করতে পারেন। উপাদানের সিলেক্টর দিয়ে আপনি প্রয়োজনীয় উপাদানটি সহজেই খুঁজে বের করতে পারবেন।

কীভাবে এইচটিএমএল উপাদান তৈরি করবেন?

জাভাস্ক্রিপ্টের createElement() ফাংশন ব্যবহার করে আপনি নতুন এইচটিএমএল উপাদান তৈরি করতে পারেন। উপাদানের ট্যাগ নাম দিয়ে আপনি একটি নতুন উপাদান তৈরি করতে পারবেন এবং এরপরে উপাদানটি ব্যবহার করতে পারবেন।

কীভাবে নতুন উপাদানকে অধিক উপাদানের মধ্যে সংযোজিত করবেন?

জাভাস্ক্রিপ্টের insertBefore() ফাংশন ব্যবহার করে আপনি নতুন উপাদানকে একটি উপাদানের নিচে সংযোজিত করতে পারেন। সংযোগকারী উপাদানের সিলেক্টর দিয়ে আপনি নতুন উপাদানটি অধিক উপাদানের মধ্যে সংযোজিত করতে পারবেন।

কীভাবে একটি উপাদান সরাবেন?

জাভাস্ক্রিপ্টের remove() ফাংশন ব্যবহার করে আপনি একটি উপাদান সরাতে পারেন। উপাদানটির সিলেক্টর দিয়ে আপনি সহজেই উপাদানটি সরাতে পারবেন।

সমাপ্তি

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