JavaScript DOM ClassList
دالة ClassList مع DOM في لغة جافا سكريبت
سوف تتعلم في هذا الدرس خاصية ClassList مع شجرة DOM وجميع الدوال المترفعها منها مثل دالة [add-remove-contains-toggle] في لغة JavaScript.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JavaScript DOM ClassList chevron_left JavaScript
JavaScript DOM ClassList
دالة ClassList مع DOM في لغة جافا سكريبت
</>
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);
هام
</>
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
</>
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'));
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
