دليل مرجعي لـ HTML DOMTokenList

DOMTokenList

DOMTokenList هي مجموعة من الرموز المفصولة بالفضاءات.

يمكن الوصول إلى قائمة DOMTokenList عبر المؤشر (تبدأ من 0).

خصائص lengthتعود عدد الرموز في قائمة DOMTokenList.

ملاحظة:عنصر HTML خصائص classListممثل قائمة DOMTokenList.

خصائص ومتغيرات قائمة DOMTokenList

الاسم وصف
add() أضف رموز إلى القائمة.
contains() إذا كان القائمة تحتوي على فئة، فإنها تعود بـ true.
entries() من يعود بمعادلة مع مفتاح/قيمة على متكرر.
forEach() أداء دالة التدفق لكل اسم في القائمة.
item() يعود إلى الاسم في الموقع المحدد.
keys() يعود إلى المكرر مع الأسماء في القائمة.
length يعود إلى عدد الأسماء في القائمة.
remove() إزالة اسم أو عدة أسماء من القائمة.
replace() تبديل الاسم في القائمة.
supports() يعود إلى الحقيقة إذا كان الاسم دعمته الخاصية.
toggle() تبديل بين الاسماء في القائمة.
value يعود إلى قائمة الاسماء بتنسيق النص.
values() يعود الماكينوم إلى المكرر مع القيم في القائمة.

مثال

مثال 1

element.classList.add("myStyle");

إضافة فئة "myStyle" إلى العنصر:

جرب بنفسك

مثال 2

إزالة فئة "myStyle" من العنصر:

element.classList.remove("myStyle");

جرب بنفسك

مثال 3

فتح وإغلاق "myStyle":

element.classList.toggle("myStyle");

جرب بنفسك

تقدم الصفحة أدناه المزيد من الأمثلة.

ليست قائمة

DOMTokenList ليست قائمة!

يبدو DOMTokenList وكأنه قائمة، لكن هذا ليس صحيحًا.

يمكنك التحقق من DOMTokenList باستخدام المؤشرات.

لكن لا يمكنك استخدام طرق اللوحة العددية مثل push() أو pop() أو join() على DOMTokenList.

مثال

مثال 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>أنا myDIV.</p>
</div>
let 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")
  } else {
    navbar.classList.remove("sticky");
  }
}

جرب بنفسك