টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশন

এই প্রবন্ধটি টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশন ব্যাখ্যা করে।

আপনি জানতে পারবেন কীভাবে DOM উপাদানগুলি ম্যানিপুলেট করা যায়, এবং কোড উদাহরণের মাধ্যমে DOM ট্রি থেকে কীভাবে উপাদান যোগ বা অপসারণ করা যায়।

YouTube Video

টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশন

টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশন জাভাস্ক্রিপ্টের মতোই করা হয়, তবে টাইপস্ক্রিপ্ট টাইপ চেকিং প্রদান করে, যার ফলে অপারেশনগুলো আরও নিরাপদ হয়। DOM (ডকুমেন্ট অবজেক্ট মডেল) হল একটি অবজেক্ট মডেল যা প্রোগ্রামেটিকভাবে HTML ও XML ডকুমেন্ট নিয়ন্ত্রণে ব্যবহৃত হয়। এটি আপনাকে ব্রাউজারে প্রদর্শিত পেজে প্রবেশাধিকার, উপাদান যোগ/অপসারণ বা স্টাইল পরিবর্তনের সুবিধা দেয়।

টাইপস্ক্রিপ্ট ব্যবহার করে DOM ম্যানিপুলেশনের মৌলিক পদ্ধতি গুলি পরিচয় করিয়ে দিই।

DOM উপাদান সংগ্রহ

document অবজেক্ট ব্যবহার করে HTML উপাদান সংগ্রহ করুন। নিম্নলিখিত পদ্ধতিগুলো সাধারণত ব্যবহৃত হয়:।

1. document.getElementById document.getElementById নির্দিষ্ট আইডি অ্যাট্রিবিউটসহ উপাদানটি নিয়ে আসে।

1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}

• document.getElementById নির্দিষ্ট আইডি দিয়ে উপাদানটি নিয়ে আসে এবং যদি সেটি থাকে তবে আপনি তার বিষয়বস্তুতে প্রবেশ করতে পারেন।

2. document.querySelector document.querySelector CSS সিলেক্টরটি মিলে যাওয়া প্রথম উপাদানটি নিয়ে আসে।

1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}

• document.querySelector নির্দিষ্ট CSS সিলেক্টর দ্বারা মিলে যাওয়া প্রথম উপাদানটি নিয়ে আসে এবং যদি সেটি থাকে তবে আপনি তার বিষয়বস্তু অ্যাক্সেস করতে পারেন।

3. document.querySelectorAll document.querySelectorAll CSS সিলেক্টরটির সাথে মিলে যাওয়া সব উপাদান নিয়ে আসে।

1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));

• document.querySelectorAll নির্দিষ্ট CSS সিলেক্টর দ্বারা মিলে যাওয়া সব উপাদান নিয়ে আসে এবং পুনরাবৃত্তির (iteration) মাধ্যমে তাদের বিষয়বস্তু অ্যাক্সেস করতে দেয়।

উপাদানের টাইপ অ্যাসারশন

টাইপস্ক্রিপ্টে, কোনো উপাদানের টাইপ স্পষ্টভাবে নির্ধারণ করলে আরও নির্দিষ্ট পদ্ধতি ও বৈশিষ্ট্য ব্যবহার করা যায়।

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}

• as কীওয়ার্ডটি TypeScript-এ একটি টাইপ অ্যাসার্শন অপারেটর, যা কম্পাইলারকে স্পষ্টভাবে নির্দেশ দেয় একটি মানকে নির্দিষ্ট টাইপ হিসেবে বিবেচনা করতে।
• TypeScript-এ, আপনি টাইপ অ্যাসার্শন ব্যবহার করে প্রাপ্ত উপাদানটিকে নির্দিষ্ট টাইপ হিসেবে বিবেচনা করতে পারেন এবং সেই টাইপের নির্দিষ্ট প্রপার্টি বা মেথডে অ্যাক্সেস করতে পারেন।

DOM ম্যানিপুলেশন

DOM-এর ব্যবস্থাপনা উপাদানগুলির বৈশিষ্ট্যগুলির মাধ্যমে সম্পন্ন হয়। এটি আপনাকে পাঠ্য বা বৈশিষ্ট্যের পরিবর্তনগুলি নমনীয়ভাবে নিয়ন্ত্রণ করতে, শৈলী প্রয়োগ করতে এবং প্রদর্শিত বিষয়বস্তু আপডেট করতে সক্ষম করে।

1. উপাদানের টেক্সট পরিবর্তন

   আপনি উপাদানের textContent অথবা innerHTML ব্যবহার করে টেক্সট অথবা HTML পরিবর্তন করতে পারেন।

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}

• আপনি কোনো উপাদানের textContent অথবা innerHTML ব্যবহার করে সেটির প্রদর্শিত টেক্সট বা HTML বিষয়বস্তু পরিবর্তন করতে পারেন।

2. উপাদানের স্টাইল পরিবর্তন

   উপাদানের style প্রপার্টি ব্যবহার করে ইনলাইন স্টাইল পরিবর্তন করা যায়।

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}

• এই কোডটি একটি নির্দিষ্ট উপাদান নিয়ে তার টেক্সটের রঙ নীল করে এবং ফন্ট সাইজ ২০ পিক্সেল নির্ধারণ করে।

3. উপাদানের অ্যাট্রিবিউট পরিবর্তন

   উপাদানের অ্যাট্রিবিউট পরিবর্তন করতে চাইলে setAttribute ব্যবহার করুন।

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}

• এই কোডটি পেজের প্রথম লিঙ্ক উপাদানের href অ্যাট্রিবিউটকে https://example.com-এ পরিবর্তন করে।

4. উপাদানের ক্লাস ম্যানিপুলেশন

   উপাদানের ক্লাস যোগ করতে অথবা অপসারণ করতে classList ব্যবহার করুন।

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}

• এই কোডটি একটি নির্দিষ্ট উপাদানে active ক্লাস যোগ করে এবং inactive ক্লাস মুছে দেয়।

DOM উপাদান যোগ ও অপসারণ

আপনি নতুন উপাদান যোগ করতে বা বিদ্যমানগুলিকে সরিয়ে ফেলতেও পারেন। এটি ব্যবহারকারীর ক্রিয়া বা অ্যাপ্লিকেশনের অবস্থা অনুযায়ী পৃষ্ঠার কাঠামো গতিশীলভাবে পরিবর্তন করা সম্ভব করে তোলে।

1. নতুন উপাদান তৈরি ও যোগ

   document.createElement ব্যবহার করে নতুন উপাদান তৈরি করুন ও DOM-এ যোগ করুন।

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body

• এই কোডটি একটি নতুন <div> উপাদান তৈরি করে, তার টেক্সট নির্ধারণ করে এবং সেটিকে পেজের <body>-তে যোগ করে।

2. উপাদান অপসারণ

   উপাদান অপসারণ করতে হলে removeChild অথবা remove পদ্ধতি ব্যবহার করুন।

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}

• এই কোডটি দেখায় কিভাবে একটি নির্দিষ্ট চাইল্ড উপাদানকে তার প্যারেন্ট থেকে সরানো যায় এবং উপাদানটিকে সরাসরি কিভাবে সরাতে হয়।

ইভেন্ট যোগ

টাইপস্ক্রিপ্টে, আপনি ইভেন্ট লিসনার যোগ করে ইউজারের ইন্টারঅ্যাকশন অনুসারে অ্যাকশন নিতে পারেন।

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}

• এই কোডটি একটি ইভেন্ট লিসেনার যোগ করে যা বোতামে ক্লিক করলে কনসোলে একটি বার্তা প্রদর্শন করে।
• addEventListener ব্যবহার করে আপনি বিভিন্ন ইভেন্ট যেমন ক্লিক, মাউস মুভমেন্ট ও কীবোর্ড ইনপুট পর্যবেক্ষণ করতে ও হ্যান্ডল করতে পারবেন।

টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশনের জন্য গুরুত্বপূর্ণ বিষয়সমূহ

TypeScript দিয়ে DOM ব্যবহার করার সময় উপাদানের ধরন নির্ধারণ এবং null যাচাইয় করতে মনোযোগ দিলে ত্রুটি প্রতিরোধ করা যায় এবং আরও দৃঢ় কোড লেখা সম্ভব হয়।

1. নাল চেকিং

   DOM উপাদান নাও থাকতে পারে, তাই টাইপস্ক্রিপ্টে এদের ম্যানিপুলেট করার আগে নাল চেক করা পরামর্শযোগ্য।

2. স্পষ্ট টাইপ অ্যাসারশন

   নির্দিষ্ট উপাদানে (যেমন HTMLInputElement) অপারেশন করার সময় টাইপ নির্দিষ্ট করতে ও value-এর মতো বৈশিষ্ট্য ব্যবহার করতে সাধারণত অ্যাসারশন (as) ব্যবহৃত হয়।

এই বিষয়গুলো মনে রেখে, টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশন জাভাস্ক্রিপ্টের নমনীয়তার সাথে টাইপস্ক্রিপ্টের টাইপ সেফটি যুক্ত করে আপনাকে আরও নিরাপদ ও পূর্বানুমেয় কোড লিখতে সহায়তা করে।

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

YouTube Video