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

في هذا الدرس 5تصفّح المواضيع

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

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

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

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

JavaScript classList syntax

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

HTML

element.classList

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

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

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

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

JavaScript DOM ClassList

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

HTML

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

جرّب بنفسك

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

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

JavaScript classList add syntax

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

HTML

element.classList.add('newClassName');

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

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

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

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

JavaScript DOM ClassList add

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

HTML

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 في لغة جافا سكريبت.

HTML

element.classList.remove('ClassName');

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

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

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

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

JavaScript DOM ClassList remove

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

HTML

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

جرّب بنفسك

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

JavaScript DOM ClassList toggle syntax

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

HTML

element.classList.toggle('ClassName');

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

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

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

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

JavaScript DOM ClassList toggle

HTML

let h1 = document.getElementById("h1");
h1.addEventListener('click',()=>{
  h1.classList.toggle('heading');
  console.log(h1.classList);
})

جرّب بنفسك

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

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

JavaScript DOM ClassList contains syntax

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

HTML

element.classList.contains('ClassName');

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

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

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

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

JavaScript DOM ClassList contains true

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

HTML

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

جرّب بنفسك

JavaScript DOM ClassList contains false

HTML

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

جرّب بنفسك

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

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

JavaScript classList syntax

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

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

JavaScript DOM ClassList

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

JavaScript classList add syntax

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

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

JavaScript DOM ClassList add

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

JavaScript DOM ClassList remove syntax

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

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

JavaScript DOM ClassList remove

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

JavaScript DOM ClassList toggle syntax

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

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

JavaScript DOM ClassList toggle

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

JavaScript DOM ClassList contains syntax

JavaScript DOM ClassList contains true

JavaScript DOM ClassList contains false

سجّل الدخول لحفظ تقدمك

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

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

JavaScript classList syntax

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

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

JavaScript DOM ClassList

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

JavaScript classList add syntax

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

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

JavaScript DOM ClassList add

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

JavaScript DOM ClassList remove syntax

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

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

JavaScript DOM ClassList remove

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

JavaScript DOM ClassList toggle syntax

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

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

JavaScript DOM ClassList toggle

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

JavaScript DOM ClassList contains syntax

JavaScript DOM ClassList contains true

JavaScript DOM ClassList contains false

مشاركة

هل كان هذا الدرس مفيدًا؟

سجّل الدخول لحفظ تقدمك