JavaScript Academy · درس

تعديل السمات والفئات

استخدموا setAttribute وواجهة classList.

تعديل السمات والفئات درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

السمات والفئات

تحمل العناصر سمات (مثل href أو data-id) وفئات CSS. وتوفر لكم JavaScript واجهات برمجية دقيقة لقراءة كل منهما وتغييرهما.

getAttribute

تقرأ getAttribute قيمة السمة كسلسلة نصية، أو تعيد null إذا لم تكن السمة موجودة.

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

تنشئ setAttribute سمة أو تحدّثها. وتكون القيم دائمًا سلاسل نصية.

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttribute وhasAttribute

استخدموا removeAttribute لحذف سمة، وhasAttribute للتحقق من وجودها.

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

الخصائص في مقابل السمات

توجد كثير من السمات أيضًا باعتبارها خصائص للعنصر (مثل element.id أو input.value). وتعكس الخصائص الحالة الحالية، بينما تحتوي السمات غالبًا على القيمة الأولية الموجودة في HTML.

input.value;                 // current value
input.getAttribute("value"); // original default

dataset مع data-*

تظهر السمات المخصصة data-* من خلال الكائن dataset باستخدام مفاتيح بصيغة camelCase.

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

نظرة عامة على classList

إن classList كائن حي لإدارة الفئات من دون التعديل اليدوي للسلسلة النصية في className.

const box = document.querySelector(".box");
console.log(box.classList);

classList.add وremove

تقبل add وremove اسم فئة واحدًا أو عدة أسماء، وتتجاهلان التكرارات أو الفئات غير الموجودة بسلاسة.

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

تضيف toggle الفئة إذا لم تكن موجودة، وتحذفها إذا كانت موجودة، وتعيد قيمة منطقية تمثل الحالة الجديدة. ويفرض المعامل الثاني تفعيل الفئة أو تعطيلها.

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.contains وreplace

تتحقق contains من عضوية الفئة، وتستبدل replace فئة بأخرى في موضعها.

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

لماذا تتفوق classList على className

قد يؤدي تعديل className كسلسلة نصية إلى محو الفئات الأخرى. أما classList فلا تغيّر إلا الفئات المستهدفة بأمان.

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

اختبار سريع

اختاروا سلوك التبديل.

مراجعة

اقرؤوا السمات واكتبوها باستخدام getAttribute/setAttribute/removeAttribute/hasAttribute، وتعاملوا مع data-* عبر dataset. وأديروا الفئات باستخدام أساليب classList، وهي add وremove وtoggle وcontains وreplace، إذ إنها أكثر أمانًا من الكتابة فوق className.

الأسئلة الشائعة

هل درس «تعديل السمات والفئات» مجاني؟

نعم — نص درس «تعديل السمات والفئات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «تعديل السمات والفئات»؟

استخدموا setAttribute وواجهة classList. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «تعديل السمات والفئات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy