باستخدام QuerySelectorAll لتعديل مظهر العناصر المتعددة

في عالم تطوير الويب ، من الضروري في كثير من الأحيان معالجة نمط العناصر المتعددة في وقت واحد. في هذا السيناريو ، توجد وظيفة JavaScript لضبط عتامة عنصر DIV محدد. ومع ذلك ، فإن التحدي يكمن في تطبيق هذه الوظيفة على العديد من divs في وقت واحد.

باستخدام getElementsByClassName في البداية يبدو وكأنه نهج قابل للحياة ، لكنه قصير في حالتنا. بدلاً من ذلك ، يظهر QuerySelectorall كحل أكثر ملاءمة. إليك كيفية تنفيذ الوظيفة:

function changeOpacity(className) {
    var elems = document.querySelectorAll(className);
    var index = 0, length = elems.length;
    for ( ; index  في هذا الرمز ، يسترجع QuerySelectorAll مجموعة من جميع divs تحتوي على اسم فئة محدد. يتكرر A for loop على هذه المجموعة ، بتطبيق تغييرات النمط المطلوب على كل عنصر. 
 
 كاقتراح بديل ، فكر في استخدام فئات CSS لتحديد قيم التصميم لعناصر متعددة. يصبح هذا النهج مفيدًا عندما لا تكون قيم التصميم ديناميكية. يمكن تعديل الكود أعلاه إلى: 
 
 
 elems [index] .classlist.add ('someclass') ؛