JavaScript

JavaScript DOM ClassList
دالة ClassList مع DOM في لغة جافا سكريبت

سوف تتعلم في هذا الدرس خاصية ClassList مع شجرة DOM وجميع الدوال المترفعها منها مثل دالة [add-remove-contains-toggle] في لغة JavaScript.

التاريخ

18 نوفمبر 2022

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1837

المواضيع

24
الشروحات chevron_left JavaScript DOM ClassList chevron_left JavaScript

JavaScript DOM ClassList
دالة ClassList مع DOM في لغة جافا سكريبت

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> JavaScript DOM ClassList
دالة ClassList مع DOM في لغة جافا سكريبت

تستخدم دالة classList في لغة جافا سكريبت لقراءة قائمة أسماء classes الكلاسات الموجودة أو المعينة لعنصر معين داخل صفحة HTML.


الدوال المساعدة لدالة classList في لغة جافا سكريبت:

  • ()add لإضافة كلاس جديد علي قائمة الكلاسات الموجودة للعنصر.
  • ()remove لحذف كلاس من قائمة الكلاسات الموجودة للعنصر.
  • ()contains للتحقق من كلاس موجود بداخل قائمة كلاس الموجودة للعنصر.
  • ()toggle لإضافة وحذف كلاس والتبديل بينهم بداخل قائمة كلاس الموجودة للعنصر.
JavaScript classList syntax

طريقة كتابة دالة classList في لغة جافا سكريبت.

element.classList

معطيات أو عوامل دالة classList في لغة جافا سكريبت:

  • لا توجد معطيات أو عوامل لدالة classList.


وظيفة دالة classList في لغة جافا سكريبت:

تقوم بإرجاء الأسماء الموجودة داخل كلاس لعنصر محدد.


JavaScript DOM ClassList

قراءة قائمة أسماء الكلاسات الموجودة في عنصر h1 عن طريق دالة ClassList في لغة جافا سكريبت.

let h1 = document.getElementById("h1");
console.log(h1.classList);
هام
تستخدم دالة classList في لغة JavaScript فقط لقراءة الكلاسات الموجودة داخل عنصر محدد في صفحة HTML.

</> JavaScript DOM ClassList add
دالة add مع دالة ClassList في لغة جافا سكريبت

تستخدم دالة ()add مع دالة classList في لغة جافا سكريبت لإضافة كلاس جديد علي قائمة الكلاسات الموجودة لعنصر محدد داخل صفحة HTML عن طريق DOM.

JavaScript classList add syntax

طريقة كتابة دالة add مع classList في لغة جافا سكريبت.

element.classList.add('newClassName');

معطيات دالة add مع دالة classList في لغة جافا سكريبت:

  •  class name  إسم الكلاس الجديد الذي نريد إضافة علي قائمة الكلاسات الموجودة مسبقاً لعنصر محدد.


وظيفة دالة add مع دالة classList في لغة جافا سكريبت:

إضافة كلاس جديد علي قائمة الكلاسات الموجودة لعنصر محدد.


JavaScript DOM ClassList add

إضافة كلاس جديد علي قائمة أسماء الكلاسات الموجودة في عنصر h1 عن طريق دالةadd مع دالة ClassList في لغة جافا سكريبت ثم قراءة الكلاسات.

let h1 = document.getElementById("h1");
console.log(h1.classList);
h1.classList.add('heading');
console.log(h1.classList);

</> JavaScript DOM ClassList remove
دالة remove مع دالة ClassList في لغة جافا سكريبت

تستخدم دالة ()remove مع دالة classList في لغة جافا سكريبت لحذف كلاس موجود في قائمة الكلاسات لعنصر محدد داخل صفحة HTML عن طريق DOM.

JavaScript DOM ClassList remove syntax

طريقة كتابة دالة remove مع classList في لغة جافا سكريبت.

element.classList.remove('ClassName');

معطيات دالة remove مع دالة classList في لغة جافا سكريبت:

  •  class name  إسم الكلاس الذي نريد حذفة من قائمة الكلاسات الموجودة مسبقاً لعنصر محدد.


وظيفة دالة remove مع دالة classList في لغة جافا سكريبت:

حذف كلاس من قائمة الكلاسات الموجودة لعنصر محدد.


JavaScript DOM ClassList remove

حذف كلاس من قائمة أسماء الكلاسات الموجودة في عنصر h1 عن طريق دالة remove مع دالة ClassList في لغة جافا سكريبت ثم قراءة الكلاسات.

let h1 = document.getElementById("h1");
console.log(h1.classList);
h1.classList.remove('heading');
console.log(h1.classList);

</> JavaScript DOM ClassList toggle
دالة toggle مع دالة ClassList في لغة جافا سكريبت

تستخدم دالة ()remove مع دالة classList في لغة جافا سكريبت لحذف كلاس موجود في قائمة الكلاسات لعنصر محدد داخل صفحة HTML عن طريق DOM.

JavaScript DOM ClassList toggle syntax

طريقة كتابة دالة toggle مع classList في لغة جافا سكريبت.

element.classList.toggle('ClassName');

معطيات دالة toggle مع دالة classList في لغة جافا سكريبت:

  •  class name  إسم الكلاس الذي نريد التبديل بين إضافتة وحذفة من قائمة الكلاسات الموجودة مسبقاً لعنصر محدد.


وظيفة دالة toggle مع دالة classList في لغة جافا سكريبت:

التبديل بين إضافة وحذف كلاس من قائمة الكلاسات الموجودة لعنصر محدد.


JavaScript DOM ClassList toggle

حذف كلاس من قائمة أسماء الكلاسات الموجودة في عنصر h1 عن طريق دالة remove مع دالة ClassList في لغة جافا سكريبت ثم قراءة الكلاسات.

let h1 = document.getElementById("h1");
h1.addEventListener('click',()=>{
  h1.classList.toggle('heading');
  console.log(h1.classList);
})
click
قم بالنقر علي عنصر h1 حتي تتمكن من رؤية إضافة وحذف عنصر heading من هذا العنصر عن طريق دالة toggle.

</> JavaScript DOM ClassList contains
دالة contains مع دالة ClassList في لغة جافا سكريبت

تستخدم دالة ()contains مع دالة classList في لغة جافا سكريبت للتحقق من كلاس موجود أم غير موجود في قائمة الكلاسات لعنصر محدد داخل صفحة HTML عن طريق DOM.

JavaScript DOM ClassList contains syntax

طريقة كتابة دالة contains مع classList في لغة جافا سكريبت.

element.classList.contains('ClassName');

معطيات دالة contains مع دالة classList في لغة جافا سكريبت:

 class name  إسم الكلاس الذي نريد التحقق منه داخل قائمة الكلاسات الموجودة مسبقاً لعنصر محدد.


وظيفة دالة contains مع دالة classList في لغة جافا سكريبت:

  • التحقق منه داخل قائمة الكلاسات الموجودة مسبقاً لعنصر محدد.
  • تقوم بإرجاع true إذا كان الكلاس موجود اما flase إذا كان الكلاس غير موجود داخل قائمة الكلاسات لعنصر محدد.


JavaScript DOM ClassList contains true

التحقق من كلاس من قائمة أسماء الكلاسات الموجودة في عنصر h1 عن طريق دالة contains مع دالة ClassList في لغة جافا سكريبت ثم قراءة الكلاسات.

let h1 = document.getElementById("h1");
h1.classList.contains('heading');
console.log(h1.classList.contains('heading'));
JavaScript DOM ClassList contains false

التحقق من كلاس من قائمة أسماء الكلاسات الموجودة في عنصر h1 عن طريق دالة contains مع دالة ClassList في لغة جافا سكريبت ثم قراءة الكلاسات.

let h1 = document.getElementById("h1");
h1.classList.contains('heading');
console.log(h1.classList.contains('heading'));
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات