كيفية معالجة الفئات بدون jQuery باستخدام classList API في HTML5

بصفتك مطورًا للواجهة الأمامية ، غالبًا ما تحتاج إلى تغيير قواعد CSS بناءً على كيفية تفاعل المستخدم مع العناصر الموجودة في الصفحة.

في الماضي ، كنت أعتمد على jQuery للتعامل مع هذه الأنواع من معالجات DOM من أجلي. لكن في بعض الحالات ، ليس من المنطقي استيراد مكتبة jQuery بأكملها ، فقط حتى تتمكن من إجراء بعض التلاعب الأساسي في DOM.

لحسن الحظ ، يوفر HTML5 طريقة للقيام بذلك محليًا ، دون الحاجة إلى jQuery.

كيف اكتشفت طريقة classList في HTML5

قبل أيام قليلة ، كنت أقرأ بعض الرموز. لقد لاحظت أن مشروعًا واحدًا تضمن jQuery كتبعية ، فقط حتى يتمكنوا من إضافة الفئات وإزالتها عندما ينقر المستخدم على زر في الصفحة. كان رمز التفاعل بالكامل 11 سطرًا فقط من التعليمات البرمجية.

اعتقدت أنه كان من الغريب أنهم كانوا يفعلون ذلك بهذه الطريقة. كان يعادل استخدام بازوكا (jQuery) لقتل بعوضة (إضافة فئات وإزالتها بنقرة واحدة).

خطر لي أنني ربما فعلت أشياء مماثلة في مشاريع الترميز السابقة. لذلك قررت أن أحاول تكرار نفس الوظيفة باستخدام JavaScript عادي ومعرفة ما يمكنني تعلمه من ذلك.

أظهر بحث سريع عدة خيارات للقيام بذلك في JavaScript عادي. ذهبت مع classList طريقة لأنه من السهل أن نفهم والدعم عبر متصفح جيد جدا.

لاحظ أنه إذا كنت بحاجة إلى دعم إصدارات Internet Explorer الأقدم من IE 11 ، فقد تحتاج إلى البحث عن طريقة بديلة أو استخدام polyfill.

إذا كنت تعتمد كليًا على استخدام jQuery لمعالجة DOM ، فهذا مكان رائع لبدء الحصول على بعض الاستقلالية عن jQuery.

ما هي classList API؟

توفر واجهة برمجة تطبيقات HTML5 classList طريقة للاستيلاء على جميع الفئات المرتبطة بالعنصر بحيث يمكنك استخدام JavaScript لتعديلها.

سيؤدي استخدام خاصية classList DOM على عنصر إلى إرجاع قائمة DOMTokenList . يحتوي هذا على جميع الفئات المطبقة على عنصر ، وخاصية length ، التي تشير إلى العدد الإجمالي للفئات على هذا العنصر.

الق نظرة على هذا المثال:

//JavaScriptvar about = document.getElementById("about"); console.log(about.classList); //logs { 0: "content-wrapper" 1: "about" 2: "animated" length: 3 value: "content-wrapper about animated" }

يمكنك تجربة ما ورد أعلاه في متصفحك لرؤيته أثناء العمل.

يعد الحصول على فئات عنصر أمرًا جيدًا وجيدًا ، ولكنه ليس مفيدًا بمفرده. نحن بحاجة إلى طريقة لإدارة وتحديث هذه الفئات. توفر خاصية classList بعض الطرق التي تقوم بذلك:

  • add () : إضافة فئات محددة
  • remove () : يزيل الفئات المحددة
  • يحتوي على () : للتحقق مما إذا كانت الفئة المحددة موجودة في العنصر
  • toggle () : تبديل الفئة المحددة
  • index () : إرجاع الفئة في موضع محدد في القائمة
  • length : إرجاع عدد الفئات

دعونا نلقي نظرة على كل واحد بدوره.

إضافة الطبقات

تعد إضافة فئة إلى عنصر أمرًا بسيطًا. فقط قم بتطبيق اسم الفئة كوسيطة لطريقة add () . لاحظ أنه إذا كان اسم الفئة موجودًا بالفعل على العنصر ، فلن تتم إضافته مرة أخرى.

//JavaScriptdocument.getElementById("headline").classList.add("title"); //gives

لإضافة فئات متعددة ، افصل بين كل فئة بفاصلة:

//JavaScriptdocument.getElementById("headline").classList.add("title", "headline"); //gives

إزالة الفصول

لإزالة فئة ، كل ما عليك فعله هو تمرير اسم الفئة كوسيطة إلى طريقة remove () . إذا لم يكن اسم الفصل موجودًا بالفعل في classList ، فسيتم طرح خطأ.

//JavaScriptdocument.getElementById("header").classList.remove("masthead"); //gives

لإزالة فئات متعددة ، افصل بين كل فئة بفاصلة:

//JavaScriptdocument.getElementById("header").classList.remove("masthead", "headline"); //gives

تحقق من وجود فصل دراسي

باستخدام طريقة contains () ، يمكننا التحقق مما إذا كانت فئة محددة موجودة في classList الخاصة بالعنصر وإجراء عمليات بناءً على قيمة الإرجاع.

فمثلا:

Click Me
//JavaScriptvar button = document.getElementById("btn"); if (button.classList.contains("hidden")) { //do something } else { //do something else}

تبديل الفئات

تعد إضافة فئة أو إزالتها بناءً على إجراء المستخدم أمرًا شائعًا. كان هذا بالضبط ما أردت تحقيقه باستخدام classList.

يمكنك التبديل بين الإضافة والإزالة باستخدام طريقة التبديل () .

هذا ما فعلته في النهاية:

//JavaScriptvar page = document.getElementById("page"); var menu = document.getElementById("menu"); var nav = document.getElementById("navigation"); 
function hasClass() { page.classList.toggle("open"); menu.classList.toggle("active"); nav.classList.toggle("hidden"); }

تحقق من عدد الفصول

لمعرفة عدد الفئات التي يتم تطبيقها على عنصر ما ، استخدم خاصية length :

//JavaScriptdocument.getElementById("navbar").classList.length; // 2

تغليف

كما ترى ، فإن classList API سهلة الاستخدام. أنا أشجعك على البدء في استكشاف إمكاناتها في تطبيقاتك الخاصة.

أيضًا ، اترك تعليقًا إذا كان لديك أي أسئلة ، أو تواصل معي عبر Twitter. لمزيد من المقالات مثل هذه ، تحقق من مدونتي. شكرا للقراءة!