HTML DOMTokenList রেফারেন্স ম্যানুয়েল

DOMTokenList

DOMTokenList একটি সমূহ হল টোকেনগুলির মধ্যে স্পেস দিয়ে ভাগ করা

DOMTokenList-কে ইনডেক্স দ্বারা অ্যাক্সেস করা যায় (0 থেকে শুরু করে)

length এপ্রিন্টিDOMTokenList-এর টোকেনের সংখ্যা ফিরিয়ে দেয়

মন্তব্য:HTML এলিমেন্টের classList এপ্রিন্টিDOMTokenList-কে প্রতিনিধিত্ব করে

DOMTokenList এপ্রিন্টি এবং পদ্ধতি

নাম বর্ণনা
add() একটি বা একাধিক টোকেন তালিকায় যোগ করুন。
contains() যদি তালিকা ক্লাস ধারণ করে, তবে true ফিরিয়ে দেয়।
entries() তালিকা থেকে কী/মান প্যার সহিত ইটারেটর ফিরিয়ে দেয়।
forEach() তালিকার প্রত্যেক টোকেনের জন্য কলব্যাক ফাংশন চালু করুন。
item() উপায়ামান সূচকের টোকেন ফিরিয়ে দিয়ে আসুন。
keys() তালিকার কীগুলির সাথে ইটারেটর ফিরিয়ে দিয়ে আসুন。
length তালিকার টোকেন সংখ্যা ফিরিয়ে দিয়ে আসুন。
remove() তালিকা থেকে একটি বা বহুভাবে টোকেন সরানো:
replace() তালিকার টোকেনগুলির স্থানান্তর করুন。
supports() যদি টোকেন একটি সমর্থিত অ্যাট্রিবিউট টোকেন হয়, তবে true ফিরিয়ে দিয়ে আসুন。
toggle() তালিকার টোকেনগুলির মধ্যে টোগল করুন。
value টোকেন তালিকা শব্দমালায় ফিরিয়ে দিয়ে আসুন。
values() তালিকার মানগুলির সাথে ইটারেটর ফিরিয়ে দিয়ে আসুন。

একটি ইনস্ট্যান্স

উদাহরণ ১

এলিমেন্টে "myStyle" ক্লাস নাম যোগ করুন:

element.classList.add("myStyle");

আপনার হাতে পরীক্ষা করুন

উদাহরণ ২

এলিমেন্ট থেকে "myStyle" ক্লাস নাম সরানো:

element.classList.remove("myStyle");

আপনার হাতে পরীক্ষা করুন

উদাহরণ ৩

ম্যাপ এবং বন্ধ করুন "myStyle":

element.classList.toggle("myStyle");

আপনার হাতে পরীক্ষা করুন

পানের নিচে আরও উদাহরণ পাওয়া যাবে。

আইনস্ট্রুমেন্ট নয়

DOMTokenList একটি আইনস্ট্রুমেন্ট নয়!

DOMTokenList-এর আকৃতি একটি আইনস্ট্রুমেন্টের মতো লাগতে পারে, কিন্তু তা একটি আইনস্ট্রুমেন্ট নয়。

আপনি DOMTokenList-কে পরিভ্রমণ করতে পারেন এবং তার টোকেনগুলির সূচক ব্যবহার করতে পারেন。

কিন্তু আপনি DOMTokenList-এর জন্য Array মেথডগুলি ব্যবহার করতে পারবেন না, যেমন push()、pop() বা join()。

একটি ইনস্ট্যান্স

উদাহরণ ১

এলিমেন্টে বহুভাবে ক্লাস নাম যোগ করা:

element.classList.add("myStyle", "anotherClass", "thirdClass");

আপনার হাতে পরীক্ষা করুন

উদাহরণ ২

এলিমেন্ট থেকে বহুভাবে ক্লাস নাম সরানো:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

আপনার হাতে পরীক্ষা করুন

উদাহরণ ৩

এলিমেন্টের ক্লাস নামের সংখ্যা পাওয়া:

let numb = element.classList.length;

আপনার হাতে পরীক্ষা করুন

উদাহরণ ৪

পাওয়া "myDIV" এলিমেন্টের ক্লাস নাম:

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

আপনার হাতে পরীক্ষা করুন

উদাহরণ ৫

ইলিমেন্টের প্রথম ক্লাস পাওয়া

let className = element.classList.item(0);

আপনার হাতে পরীক্ষা করুন

উদাহরণ 6

ইলিমেন্ট "myStyle" ক্লাস থাকে কি?

let x = element.classList.contains("myStyle");

আপনার হাতে পরীক্ষা করুন

উদাহরণ 7

যদি ইলিমেন্ট "myStyle" ক্লাস থাকে, "anotherClass" অপসারণ করুন:

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 8

ক্লাসের মধ্যে ট্যাগ টুলকরা করে, ড্রপডাউন বাটন তৈরি করুন:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 9

স্টিকি নেভিগেশন বার তৈরি করুন:

// নেভিগেশন বার পাওয়া
const navbar = document.getElementById("navbar");
// নেভিগেশন বারের সরকার স্থান পাওয়া
const sticky = navbar.offsetTop;
// আপনি তার সরকার স্থানে পৌঁছালে, sticky ক্লাস নিয়ে নেওয়া হবে নেভিগেশন বার
// সরকার স্থান থেকে অপসারণ করুন
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

আপনার হাতে পরীক্ষা করুন