منابع مرجع HTML DOMTokenList

DOMTokenList

DOMTokenList یک مجموعه از توکن‌های جدا شده با فاصله هستند.

DOMTokenList را می‌توان از طریق شماره‌ی اشاره‌گر (از 0 شروع می‌شود) دسترسی پیدا کرد.

ویژگی lengthتعداد توکن‌های موجود در DOMTokenList را بازمی‌گرداند.

توضیح:عناصر HTML ویژگی classListDOMTokenList را نشان می‌دهد.

ویژگی‌ها و روش‌های DOMTokenList

نام توضیحات
add() یک یا چند توکن را به لیست اضافه می‌کند.
contains() اگر لیست شامل یک کلاس باشد، در اینجا true بازمی‌گرداند.
entries() مجمع می‌تواند یک یا چند تابع را بر اساس یک یا چند کلید/مقدار بازگرداند.
forEach() برای هر نشانه در لیست، یک تابع بازگشتی کو اجرا کنید.
item() نشانه در موقعیت مشخص رو برگردانید.
keys() ایتراتوری از کلیدهای لیست رو برگردانید.
length تعداد نشانه‌های لیست رو برگردانید.
remove() یک یا چند نشانه رو از لیست کو حذف کنید.
replace() نشانه‌های لیست رو جایگزین کنید.
supports() اگر نشانه یکی از نشانه‌های پشتیبانی شده است، true رو برگردانید.
toggle() بین نشانه‌های لیست کو سوئیچ کنید.
value لیست نشانه‌ها رو به شکل رشته برگردانید.
values() ایتراتوری از مقادیر لیست رو برگردانید.

مثال

مثال 1

کلاس "myStyle" رو به عنصر کو اضافه کنید:

element.classList.add("myStyle");

آپ خود اس پر امتحان کریں

مثال 2

کلاس "myStyle" رو از عنصر کو حذف کنید:

element.classList.remove("myStyle");

آپ خود اس پر امتحان کریں

مثال 3

باز و بسته کردن "myStyle":

element.classList.toggle("myStyle");

آپ خود اس پر امتحان کریں

در پایین صفحه نمونه‌های بیشتری ارائه شده است.

آرایه نیست

DOMTokenList آرایه نیست!

DOMTokenList ممکنه شبیه آرایه به نظر برسه، اما اینطور نیست.

شما می‌توانید DOMTokenList رو به وسیله‌ی شماره‌ی انگشتی به گردش ببرید.

اما شما نمی‌توانید از روش‌های آرایه در DOMTokenList استفاده کنید، مانند push()، pop() یا join()。

مثال

مثال 1

چندین کلاس رو به عنصر کو اضافه کنید:

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

آپ خود اس پر امتحان کریں

مثال 2

چندین کلاس رو از عنصر کو حذف کنید:

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

آپ خود اس پر امتحان کریں

مثال 3

کلاس نمونه تعداد کو بگیرید:

let numb = element.classList.length;

آپ خود اس پر امتحان کریں

مثال 4

کلاس نمونه "myDIV" کو بگیرید:

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

آپ خود اس پر امتحان کریں

مثال 5

عنصر کی پہلی کلاس حاصل کریں:

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")
  }
    navbar.classList.remove("sticky");
  }
}

آپ خود اس پر امتحان کریں