دستورالعمل 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");
  }
}

به طور مستقیم امتحان کنید