DOM “ টোকেনলিস্ট ” অনেক বৈশিষ্ট্য বা পদ্ধতি রয়েছে যা শেষ ব্যবহারকারী তাদের প্রয়োজনীয়তা অনুসারে অ্যাক্সেস করতে পারে। এই তালিকা দ্বারা প্রদত্ত বৈশিষ্ট্য এবং পদ্ধতিগুলি প্রদত্ত ডেটা সেটগুলির উপর নির্দিষ্ট ক্রিয়াকলাপ সম্পাদন করে এবং সেই অনুযায়ী ফলাফল প্রদান করে। এটি আরও একটি অ্যারের মতো কারণ এতে বিভিন্ন সদস্য রয়েছে যা তাদের সূচক দ্বারা নির্বাচন করা যেতে পারে এবং একটি অ্যারের মতো প্রথম সূচকটি হল “ 0 ” কিন্তু আপনি 'এর মত পদ্ধতি ব্যবহার করতে পারবেন না পপ()', 'পুশ()' বা 'যোগদান() ”
এই ব্লগটি জাভাস্ক্রিপ্ট দ্বারা HTML DOMTokenList অবজেক্টের কাজ ব্যাখ্যা করবে।
কিভাবে JavaScript HTML DOMTokenList অবজেক্টের সাথে কাজ করবেন?
HTML DOMTokenList নিজে থেকে কিছুই নয় এবং এর মান শুধুমাত্র এতে থাকা বৈশিষ্ট্য এবং পদ্ধতির কারণে। আসুন সঠিক বাস্তবায়নের সাথে এই বৈশিষ্ট্যগুলি এবং পদ্ধতিগুলি বিস্তারিতভাবে দেখুন।
পদ্ধতি 1: Add() পদ্ধতি
দ্য ' যোগ করুন ()' নির্বাচিত উপাদানের সাথে নতুন ক্লাস, বৈশিষ্ট্য বা সাধারণ টোকেন সংযুক্ত করে বা বরাদ্দ করে। এর সিনট্যাক্স নীচে বর্ণিত হয়েছে:
html এলিমেন্ট। যোগ করুন ( oneOrMoreToken )
এর বাস্তবায়ন নিম্নলিখিত কোডের মাধ্যমে সঞ্চালিত হয়:
< মাথা >
< শৈলী >
.অক্ষরের আকার{
ফন্ট-আকার: বড়;
}
.color{
ব্যাকগ্রাউন্ড-রঙ: ক্যাডেটব্লু;
রঙ: সাদা ধোঁয়া;
}
< / শৈলী >
< / মাথা >
< শরীর >
< h1 শৈলী = 'রঙ: ক্যাডেটব্লু;' > লিনাক্স < / h1 >
< বোতাম অনক্লিক = 'কর্ম()' > যোজক < / বোতাম >
< পি > স্টাইলিং প্রয়োগ করতে উপরের বোতাম টিপুন < / পি >
< div আইডি = 'নির্বাচিত' >
< পি > আমি নির্বাচিত পাঠ্য। < / পি >
< / div >
< লিপি >
ফাংশন কর্ম() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / লিপি >
< / শরীর >
উপরের কোডের ব্যাখ্যা নিম্নরূপ:
- প্রথমে দুটি সিএসএস ক্লাস নির্বাচন করুন “ অক্ষরের আকার ' এবং 'রং' এবং তাদের এলোমেলো CSS বৈশিষ্ট্যগুলি বরাদ্দ করুন যেমন ' ফন্ট-আকার', 'পটভূমি-রঙ' এবং 'রঙ ”
- এরপরে, “< ব্যবহার করে বোতাম তৈরি করুন বোতাম >' ট্যাগ যা 'কে আহ্বান করে কর্ম ()' ফাংশন ব্যবহার করে ' অনক্লিক ” ঘটনা শ্রোতা।
- উপরন্তু, একটি অভিভাবক তৈরি করুন ' div ' উপাদান এবং এটি একটি আইডি বরাদ্দ করুন ' নির্বাচিত এবং এর ভিতরে ডামি ডেটা সন্নিবেশ করুন।
- এর পরে, সংজ্ঞায়িত করুন ' কর্ম ()' ফাংশন করে এবং নির্বাচিত উপাদানটির অনন্য আইডি অ্যাক্সেস করে রেফারেন্স সংরক্ষণ করে।
- অবশেষে, ব্যবহার করুন ' ক্লাসলিস্ট ' ক্লাস বরাদ্দ করার এবং সংযুক্ত করার জন্য সম্পত্তি ' যোগ করুন ()' পদ্ধতি। তারপর, এই পদ্ধতি বন্ধনীর ভিতরে CSS ক্লাসগুলি পাস করুন এবং এটি এই ক্লাসগুলিকে নির্বাচিত উপাদানগুলিতে প্রয়োগ করবে।
উপরের কোডের সংকলনের পরে আউটপুট তৈরি হয়:
উপরের জিআইএফ নিশ্চিত করে যে সিএসএস ক্লাসগুলি 'এর মাধ্যমে একটি নির্বাচিত উপাদানকে বরাদ্দ করা হয়েছে যোগ করুন ()' পদ্ধতি।
পদ্ধতি 2: অপসারণ() পদ্ধতি
এই পদ্ধতিটি নীচের কোডে করা এক বা একাধিক নির্বাচিত উপাদান থেকে নির্দিষ্ট শ্রেণী বা আইডি সরিয়ে দেয়:
< মাথা >< শৈলী >
.অক্ষরের আকার {
হরফ- আকার : বড়;
}
. রঙ {
পটভূমি- রঙ : ক্যাডেটব্লু;
রঙ : সাদা ধোঁয়া;
}
< / শৈলী >
< / মাথা >
< শরীর >
< h1 শৈলী = 'রঙ: ক্যাডেটব্লু;' > লিনাক্সহিন্ট < / h1 >
< বোতাম অনক্লিক = 'কর্ম()' >যোগক< / বোতাম >
< পি >স্টাইলিং প্রয়োগ করতে উপরের বোতাম টিপুন< / পি >
< div আইডি = 'নির্বাচিত' ক্লাস = 'ফন্ট সাইজ রঙ' >
< পি >আমি নির্বাচিত পাঠ্য .< / পি >
< / div >
< লিপি >
ফাংশন কর্ম ( ) {
document.getElementById ( 'নির্বাচিত' ) .classList.remove ( 'রঙ' ) ;
}
< / লিপি >
< / শরীর >
উপরের কোডের বর্ণনা নিম্নরূপ:
- প্রাথমিকভাবে, উপরের কোডে ব্যাখ্যা করা কোডটি এখানে উদাহরণ হিসেবে ব্যবহার করা হয়েছে।
- এখানে, উভয়ই ' রঙ ' এবং ' অক্ষরের আকার ' ক্লাসগুলি সরাসরি নির্বাচিত উপাদানে বরাদ্দ করা হয়৷
- এর পরে, ভিতরে ' কর্ম ()' ফাংশন যা ' দ্বারা আহ্বান করা হয় অনক্লিক 'ঘটনা শ্রোতা' অপসারণ ()' টোকেন পদ্ধতি ব্যবহার করা হয়।
- এই পদ্ধতিটি এক বা একাধিক ক্লাস নেয় যা নির্বাচিত উপাদান থেকে সরানো হবে। আমাদের ক্ষেত্রে, ' রঙ 'ক্লাসটি নির্বাচিত HTML উপাদান থেকে সরানো হবে।
উপরের কোডের আউটপুটটি এইভাবে প্রদর্শিত হয়:
উপরের আউটপুটটি দেখায় যে 'রিমুভ()' পদ্ধতি ব্যবহার করে নির্বাচিত উপাদান থেকে নির্দিষ্ট CSS ক্লাস মুছে ফেলা হয়েছে।
পদ্ধতি 3: টগল() পদ্ধতি
দ্য ' টগল ()' পদ্ধতি হল উভয়ের সমন্বয় যোগ করুন ()' এবং ' অপসারণ ()' পদ্ধতি। এটি প্রথমে নির্বাচিত HTML এলিমেন্টে প্রদত্ত CSS ক্লাস বরাদ্দ করে এবং তারপর ব্যবহারকারীর ক্রিয়া অনুসারে এটি সরিয়ে দেয়।
< html >< মাথা >
< শৈলী >
.অক্ষরের আকার {
হরফ- আকার : xx-বড়;
}
. রঙ {
পটভূমি- রঙ : ক্যাডেটব্লু;
রঙ : সাদা ধোঁয়া;
}
< / শৈলী >
< / মাথা >
< শরীর >
< h1 শৈলী = 'রঙ: ক্যাডেটব্লু;' > লিনাক্সহিন্ট < / h1 >
< বোতাম অনক্লিক = 'কর্ম()' >যোগক< / বোতাম >
< পি >স্টাইলিং প্রয়োগ করতে উপরের বোতাম টিপুন< / পি >
< div আইডি = 'নির্বাচিত' >
< পি >আমি নির্বাচিত পাঠ্য .< / পি >
< / div >
< লিপি >
ফাংশন কর্ম ( ) {
document.getElementById ( 'নির্বাচিত' ) .classList.toggle ( 'অক্ষরের আকার' ) ;
}
< / লিপি >
< / শরীর >
< / html >
উপরোক্ত কোডের একটি বিবরণ নীচে বর্ণিত হয়েছে:
- উপরের বিভাগে ব্যবহৃত হিসাবে একই প্রোগ্রাম ব্যবহার করা হয়েছে, শুধুমাত্র ' টগল ()' পদ্ধতিটি ' দিয়ে প্রতিস্থাপিত হয় অপসারণ ()' পদ্ধতি।
সংকলন পর্বের শেষে, আউটপুট নিম্নরূপ হবে:
আউটপুট দেখায় যে ব্যবহারকারীর ক্রিয়া অনুসারে নির্দিষ্ট CSS ক্লাস যুক্ত এবং সরানো হচ্ছে।
পদ্ধতি 4: ধারণ করে() পদ্ধতি
দ্য ' ধারণ করে ()' পদ্ধতিটি এইচটিএমএল উপাদানের উপর নির্দিষ্ট CSS ক্লাসের উপলব্ধতা পরীক্ষা করতে ব্যবহৃত হয় এবং এর বাস্তবায়ন নীচে বর্ণিত হয়েছে:
< লিপি >ফাংশন কর্ম ( ) {
যাক x = নথি getElementById ( 'নির্বাচিত' ) . ক্লাসলিস্ট . ধারণ করে ( 'অক্ষরের আকার' ) ;
নথি getElementById ( 'পরীক্ষা' ) . innerHTML = এক্স ;
}
লিপি >
HTML এবং CSS অংশ একই থাকে। শুধুমাত্র “< লিপি >' ট্যাগ, 'contains()' পদ্ধতিটি নির্বাচিত উপাদানের উপর প্রয়োগ করা হয় কিনা তা পরীক্ষা করতে অক্ষরের আকার ” সেই উপাদানে প্রয়োগ করা হয় বা না হয়। তারপরে, ফলাফলটি একটি আইডি সহ একটি HTML উপাদানের ওয়েবপৃষ্ঠায় প্রদর্শিত হয় “ পরীক্ষা ”
উপরের কোড সংকলন করার পরে, ওয়েবপৃষ্ঠাটি এইরকম প্রদর্শিত হবে:
আউটপুট দেখায় যে 'এর মান সত্য ” ফেরত দেওয়া হয় যার মানে নির্বাচিত HTML উপাদানের উপর নির্দিষ্ট CSS ক্লাস প্রয়োগ করা হয়।
পদ্ধতি 5: আইটেম() পদ্ধতি
দ্য ' আইটেম ()' পদ্ধতিটি 'থেকে শুরু করে তাদের সূচক নম্বর অনুসারে টোকেন বা CSS ক্লাস নির্বাচন করে' 0 ', নিচে দেখানো হয়েছে:
< শরীর >< h1 শৈলী = 'রঙ: ক্যাডেটব্লু;' > লিনাক্স h1 >
< বোতামে ক্লিক করুন = 'কর্ম()' > পরীক্ষক বোতাম >
< পি > সিএসএস ক্লাস যা প্রথমে বরাদ্দ করা হয় , পুনরুদ্ধার করা হয় : পি >
< h3 আইডি = 'ব্যবহারের ক্ষেত্রে' ক্লাস = 'firstCls secondCls thirdCls' >> h3 >
< লিপি >
ফাংশন কর্ম ( ) {
ডেমোলিস্ট করা যাক = নথি getElementById ( 'ব্যবহারের ক্ষেত্রে' ) . ক্লাসলিস্ট . আইটেম ( 0 ) ;
নথি getElementById ( 'ব্যবহারের ক্ষেত্রে' ) . innerHTML = ডেমোলিস্ট ;
}
লিপি >
শরীর >
উপরের কোডের ব্যাখ্যা:
- প্রথমত, একাধিক CSS ক্লাস আমাদের নির্বাচিত এলিমেন্টের জন্য বরাদ্দ করা হয় যার একটি আইডি “ ব্যবহারের ক্ষেত্রে 'এবং 'ক্রিয়া()' পদ্ধতি যা 'এর মাধ্যমে আহ্বান করা হয় অনক্লিক ' ঘটনা।
- এই ফাংশনে, ' আইটেম ()' এর একটি সূচক সহ পদ্ধতি 0 ' নির্বাচিত উপাদানের সাথে সংযুক্ত করা হয়। ফলাফল ভেরিয়েবলে সংরক্ষণ করা হয় ' ডেমোলিস্ট যা তারপর ওয়েবপেজে মুদ্রিত হয় ' innerHTML 'সম্পত্তি।
কম্পাইলেশন শেষে, আউটপুট এই মত আসে:
আউটপুট CSS ক্লাসের নাম দেখায় যা প্রথমে নির্বাচিত উপাদানের উপর প্রযোজ্য এবং পুনরুদ্ধার করা হয়।
পদ্ধতি 6: দৈর্ঘ্য সম্পত্তি
দ্য ' দৈর্ঘ্য ” টোকেনলিস্টের বৈশিষ্ট্য নির্বাচিত উপাদানের উপর প্রয়োগ করা উপাদান বা নির্ধারিত ক্লাসের সংখ্যা প্রদান করে। বাস্তবায়ন প্রক্রিয়া নীচে বর্ণিত হয়েছে:
< লিপি >ফাংশন কর্ম ( ) {
তাদের ধ্বংস করা যাক = নথি getElementById ( 'ব্যবহারের ক্ষেত্রে' ) . ক্লাসলিস্ট . দৈর্ঘ্য ;
নথি getElementById ( 'ব্যবহারের ক্ষেত্রে' ) . innerHTML = ধ্বংস করা ;
}
লিপি >
উপরের কোড ব্লকে:
- প্রথমে ' দৈর্ঘ্য 'সম্পত্তি সংযুক্ত করা হয়' ক্লাসলিস্ট ' নির্বাচিত উপাদানের উপর বরাদ্দ করা ক্লাসের সংখ্যা পুনরুদ্ধার করার জন্য সম্পত্তি।
- এরপরে, সম্পত্তির ফলাফল ভেরিয়েবলে সংরক্ষিত হয় “ ধ্বংস করা ' যা একটি আইডি সহ একটি উপাদানের ওয়েবপৃষ্ঠায় প্রদর্শিত হবে ব্যবহারের ক্ষেত্রে ”
- বাকি কোড উপরের সেকশনের মতোই থাকে।
সংকলনের পরে উত্পন্ন আউটপুট নীচে বর্ণিত হয়েছে:
আউটপুট উপাদানের উপর প্রয়োগকৃত ক্লাস ফেরত দেয়।
পদ্ধতি 7: প্রতিস্থাপন() পদ্ধতি
দ্য ' প্রতিস্থাপন ()' পদ্ধতি হল এমন একটি যা কমপক্ষে দুটি প্যারামিটার নেয় এবং নির্বাচিত উপাদানের জন্য দ্বিতীয় প্যারামিটারের সাথে প্রথম প্যারামিটার প্রতিস্থাপন করে, যেমনটি নীচে দেখানো হয়েছে:
< লিপি >ফাংশন কর্ম ( ) {
ডেমোলিস্ট করা যাক = নথি getElementById ( 'ব্যবহারের ক্ষেত্রে' ) . ক্লাসলিস্ট . প্রতিস্থাপন ( 'অক্ষরের আকার' , 'রঙ' ) ;
}
লিপি >
এখানে, CSS “ অক্ষরের আকার ' ক্লাস CSS দিয়ে প্রতিস্থাপিত হয় ' রঙ ' একটি আইডি সহ একটি উপাদানের জন্য ক্লাস' ব্যবহারের ক্ষেত্রে ” বাকি এইচটিএমএল এবং সিএসএস কোড উপরের সেকশনের মতই থাকে।
পরিবর্তন করার পর ' লিপি ” অংশ এবং প্রধান HTML ফাইল সংকলন, আউটপুট এই মত দেখায়:
আউটপুট দেখায় যে নির্দিষ্ট CSS ক্লাস অন্য ক্লাস দিয়ে প্রতিস্থাপিত হয়েছে।
পদ্ধতি 8: মূল্য সম্পত্তি
দ্য ' মান ” টোকেন তালিকা বৈশিষ্ট্য নির্বাচিত HTML উপাদানের জন্য নির্ধারিত প্রয়োজনীয় মান পুনরুদ্ধার করে। যখন এটি 'এর পাশে সংযুক্ত হয় ক্লাসলিস্ট ” সম্পত্তি, নির্বাচিত উপাদানগুলিতে বরাদ্দ করা ক্লাসগুলি পুনরুদ্ধার করা হয়, যেমনটি নীচে প্রদর্শিত হয়েছে:
< লিপি >ফাংশন কর্ম ( ) {
ডেমোভাল দিন = নথি getElementById ( 'ব্যবহারের ক্ষেত্রে' ) . ক্লাসলিস্ট . মান ;
নথি getElementById ( 'ছাপা' ) . innerHTML = ডেমোভাল ;
}
লিপি >
উপরে বর্ণিত কোড স্নিপেটের বর্ণনা:
- ভিতরে ' কর্ম ()' ফাংশন বডি, ' মান 'সম্পত্তি' এর পাশে সংযুক্ত আছে ক্লাসলিস্ট ' নির্বাচিত HTML উপাদানগুলির সমস্ত বরাদ্দকৃত ক্লাস পুনরুদ্ধার করার জন্য সম্পত্তি।
- এর পরে, উপরের সম্পত্তির ফলাফল একটি পরিবর্তনশীল 'এ সংরক্ষণ করা হয় ডেমোভাল ' এবং 'প্রিন্ট' এর একটি আইডি থাকা উপাদানটির উপরে সন্নিবেশ করা হয়েছে।
সংকলন পর্ব শেষ হওয়ার পরে, একটি ওয়েবপেজে আউটপুট নিম্নরূপ উত্পন্ন হয়:
আউটপুট সিএসএস ক্লাসের নাম দেখায় যা নির্বাচিত উপাদানের উপর প্রয়োগ করা হয়।
উপসংহার
এইচটিএমএল ডম টোকেনলিস্ট অবজেক্টটি একটি অ্যারের মতো যা একাধিক পদ্ধতি এবং বৈশিষ্ট্য সংরক্ষণ করে যা প্রদত্ত HTML উপাদানের উপর নির্দিষ্ট কার্যকারিতা প্রয়োগ করতে ব্যবহৃত হয়। টোকেনলিস্ট দ্বারা প্রদত্ত সবচেয়ে গুরুত্বপূর্ণ এবং বহুল ব্যবহৃত কিছু পদ্ধতি হল “ যোগ()', 'সরান()', 'টগল()', 'ধারণ করে()', 'আইটেম()', এবং 'প্রতিস্থাপন() ” টোকেনলিস্ট দ্বারা প্রদত্ত বৈশিষ্ট্যগুলি হল ' দৈর্ঘ্য ' এবং ' মান ” এই নিবন্ধটি JavaScript HTML DOMTokenList অবজেক্টের সাথে কাজ করার পদ্ধতি ব্যাখ্যা করেছে।