तत्वों की पूरी कक्षा पर जावास्क्रिप्ट कुशल शैली परिवर्तन

Question

एक बहुत ही सामान्य परिदृश्य के उदाहरण में, जहां हमें तत्वों की एक पूरी कक्षा की शैली बदलने की आवश्यकता है, हमारे पास एक (सरलीकृत और सामान्यीकृत) कोड है जो इस तरह दिखता है:

var elements = document.getElementsByTagName('div'); 
for (var i = 0; i < elements.length; i++) 
    if (elements[i].className == 'HideMe') 
     elements[i].style.visibility = 'hidden'; 

यह दस्तावेज़ से सभी div तत्वों हो जाता है, उन के माध्यम से लूप होता है, और लोगों को है कि वर्ग "HideMe" की दृश्यता को "छिपा" बदल जाता है। दूसरी ओर, यह कोड:

document.innerHTML.replace(/class="HideMe"/mg, 'class="HideMe" style="visibility: hidden"'); 

कक्षा "HideMe" श्रेणी में सभी चीज़ों के लिए अदृश्यता शैली डालेगा। मैं JavaScript पर नया हूं, और मुझे गलत मत समझो, लेकिन हर उदाहरण, मैंने जो भी ट्यूटोरियल देखा है, वह पहली विधि सिखाता है। एक-लाइनर, एक एकल फ़ंक्शन कॉल नहीं, एक अधिक बुद्धिमान द्वारा बनाई गई प्रतिस्थापन एल्गोरिदम, if कथन के किसी भी प्रकार के लूप के मुकाबले तेज़ और कम संसाधन-गहन होना चाहिए?

document.innerHTML.replace('id="foo"', 'id="bar"'); 

के बजाय: सवाल वास्तव में अधिक सामान्य से एक है, ऐसा क्यों नहीं है

document.getElementById('foo').id = 'bar'; 

निरीक्षण कोड बिल्कुल ही है, लेकिन प्रदर्शन के लिए, मैं शायद यह परिवर्तन करने के लिए की आवश्यकता होगी हजारों तत्वों की शैली ताकि मैं किसी भी महत्वपूर्ण अंतर को माप सकूं। क्या कोई अच्छा, अच्छी तरह से तर्क दिया गया कारण है कि हमें दूसरे तरीके से एक विधि का पक्ष क्यों लेना चाहिए?

Answer 1

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

दूसरी तरफ, डोम मैनिपुलेशन विधियों के उचित उपयोग से आपको सबसे अच्छा प्रदर्शन और क्लीनर और कोड पढ़ने में आसान होना चाहिए।

हालांकि, आपके द्वारा उल्लेख की जाने वाली पहली विधि भी बहुत अच्छी नहीं है: आपको जावास्क्रिप्ट के साथ सीएसएस शैलियों को बदलने से बचना चाहिए। आदर्श दृष्टिकोण उदाहरण के लिए तत्वों के लिए एक और संशोधक वर्ग को जोड़ने के लिए, होगा:

var elements = document.getElementsByTagName('div'); 
for (var i = 0; i < elements.length; i++) 
    if (elements[i].className == 'HideMe') 
     elements[i].className += ' HideMe-hidden'; 
     // or elements[i].classList.add('HideMe-hidden'); 

जहां सीएसएस में आप यह सबसे लचीला और इष्टतम समाधान है

.HideMe-hidden { 
    visibility: hidden; 
} 

होगा।