साफ़ element.classList

Question

element.classListDOMTokenList प्रकार का है।

क्या इस सूची को साफ़ करने के लिए कोई तरीका है?

Answer 1

मुझे classList से जुड़े "फ़ंक्शन" के अर्थ में "विधि" के बारे में पता नहीं है। यह जोड़ सकते हैं या अलग अलग वर्गों को दूर करने के .add() और .remove() तरीकों है, लेकिन आप इस प्रकार का तत्व से सभी वर्गों को दूर करने के अर्थ में सूची को साफ़ कर सकते हैं:

element.className = ""; 

Answer 2

मैं का उपयोग नहीं करने की सलाह देते classNameclassList के रूप में तेजी से हो सकता है डोम अपडेट

DOMTokenList की remove() विधि (जो क्या classList है) कई तर्क ले सकते हैं - दूर करने के लिए एक classname में से प्रत्येक के एक स्ट्रिंग (reference)। सबसे पहले आपको classList को श्रेणीनामों की योजना सरणी में परिवर्तित करने की आवश्यकता है। कुछ लोग ऐसा करने के लिए Array.prototype.slice() का उपयोग करते हैं, लेकिन मैं एक प्रशंसक नहीं हूं और मैं सोचता हूं कि अधिकतर ब्राउज़रों में लूप तेज है - लेकिन किसी भी तरह से मेरे पास लूप के लिए कुछ भी नहीं है और स्लाइस अक्सर मुझे हैक की तरह लगता है। एक बार आपके पास सरणी हो जाने के बाद आप तर्कों की सूची के रूप में उस सरणी को पास करने के लिए बस apply() का उपयोग करें।

मैं इसे पूरा करने के लिए लिखित एक उपयोगिता वर्ग का उपयोग करता हूं। पहली विधि वह है जिसे आप ढूंढ रहे हैं, लेकिन मैं आपके संदर्भ के लिए थोड़ा और अधिक शामिल कर रहा हूं।

ElementTools.clearClassList = function(elem) { 
    var classList = elem.classList; 
    var classListAsArray = new Array(classList.length); 
    for (var i = 0, len = classList.length; i < len; i++) { 
     classListAsArray[i] = classList[i]; 
    } 
    ElementTools.removeClassList(elem, classListAsArray); 
} 
ElementTools.removeClassList = function(elem, classArray) { 
    var classList = elem.classList; 
    classList.remove.apply(classList, classArray); 
}; 
ElementTools.addClassList = function(elem, newClassArray) { 
    var classList = elem.classList; 
    classList.add.apply(classList, newClassArray); 
}; 
ElementTools.setClassList = function(elem, newClassArray) { 
    ElementTools.clearClassList(elem); 
    ElementTools.addClassList(elem, newClassArray); 
}; 

कृपया ध्यान दें कि मैं अच्छी तरह से परियोजना मैं पर काम कर रहा हूँ केवल आधुनिक ब्राउज़रों की एक बहुत ही सीमित सेट में काम करने की जरूरत के रूप में सभी ब्राउज़रों में यह परीक्षण नहीं किया। लेकिन यह आईई 10 पर वापस काम करना चाहिए, और यदि आप क्लासलिस्ट के लिए एक शिम (https://github.com/eligrey/classList.js) शामिल करते हैं, तो IE7 पर वापस काम करना चाहिए (और एसवीजी के साथ भी एली ग्रे के शिम असमर्थित ब्राउज़र में एसवीजी के लिए समर्थन जोड़ता है)।

एक वैकल्पिक दृष्टिकोण जिसे मैंने माना था classList के माध्यम से पीछे लूप करना था और प्रत्येक प्रविष्टि के लिए क्लासलिस्ट पर remove() पर कॉल करें। (पीछे की तरफ जब आप प्रत्येक को हटाते हैं तो लंबाई बदलती है।) हालांकि यह भी काम करना चाहिए, मुझे लगता है कि remove() पर कई तर्कों का उपयोग करके तेज़ हो सकता है क्योंकि आधुनिक ब्राउज़र इसके लिए अनुकूलित कर सकते हैं और प्रत्येक बार जब मैं कॉल करता हूं तो डोम को कई अपडेट से बचने के लिए) एक लूप में। इसके अतिरिक्त दोनों दृष्टिकोणों के लिए लूप की आवश्यकता होती है (या तो एक सूची बनाने या प्रत्येक को हटाने के लिए) इसलिए मुझे इस वैकल्पिक दृष्टिकोण के लिए कोई लाभ नहीं मिला। लेकिन फिर, मैंने कोई गति परीक्षण नहीं किया।

यदि कोई व्यक्ति विभिन्न दृष्टिकोणों की गति का परीक्षण करता है या बेहतर समाधान है, तो कृपया पोस्ट करें।

संपादित: मैं शिम जो इसे सही ढंग से add() और remove() करने के लिए कई तर्क के लिए IE11/10 के लिए समर्थन जोड़ने से बंद हो जाता है में एक बग मिला। मैंने जिथब पर report दायर किया है।

Answer 3

var classList = element.classList; 
while (classList.length > 0) { 
    classList.remove(classList.item(0)); 
}