2014-11-10 6 views
45

मैंने सुना है कि querySelector & querySelectorAllDOM तत्वों का चयन करने के नए तरीके हैं। प्रदर्शन और ब्राउज़र समर्थन के संदर्भ में वे पुरानी विधियों, getElementById & getElementsByClassName से तुलना कैसे करते हैं?जावास्क्रिप्ट querySelector बनाम getElementById

प्रदर्शन jQuery की क्वेरी चयनकर्ता का उपयोग करने की तुलना में कैसे करता है?

क्या मूल सेट का उपयोग करने के लिए सबसे अच्छा अभ्यास सिफारिश है?

+1

बेहतर परिभाषित करें। वे लगभग पूरी तरह से अलग हैं। –

+3

यह पूछने जैसा है "एक समायोज्य स्पैनर से बेहतर एक एकल आकार का स्पैनर है?" जवाब यह है: वे अधिक शक्तिशाली और अधिक लचीले होते हैं, और कई मौकों पर बेहतर होते हैं, लेकिन 'getElementById' और' getElementsByClassName' उनके नामों के वर्णन के लिए अभी भी आदर्श हैं। – lonesomeday

+0

यदि आप विशेष रूप से उन स्थानों के बारे में पूछ रहे हैं जहां वे ओवरलैप करते हैं, तो यह सब निर्भर करता है। 'क्यूएस' और' क्यूएसए 'धीमा हो सकता है (या शायद नहीं)। 'qSA' के पास' जीईबीसीएन' की तुलना में व्यापक समर्थन है। 'जीईबीसीएन' एक "लाइव सूची" देता है और 'क्यूएसए' नहीं करता है। –

उत्तर

58

"बेहतर" व्यक्तिपरक है।

querySelector नई सुविधा है।

getElementByIdquerySelector से बेहतर समर्थित है।

querySelectorgetElementsByClassName से बेहतर समर्थित है।

querySelector आप नियमों कि getElementById और getElementsByClassName

आप किसी भी कार्य के लिए उपयुक्त उपकरण लेने के लिए की जरूरत के साथ व्यक्त नहीं किया जा सकता है के साथ तत्वों को खोजने की सुविधा देता है।

(उपरोक्त में, querySelectorquerySelector/querySelectorAll पढ़ें)।

+4

क्वेरी चयनकर्ता समर्थन: http://caniuse.com/#feat=queryselector – tazboy

20

फ़ंक्शन getElementById और getElementsByClassName बहुत विशिष्ट हैं, जबकि querySelector और querySelectorAll अधिक विस्तृत हैं। मेरा अनुमान है कि वे वास्तव में एक खराब प्रदर्शन होगा।

इसके अलावा, आपको उन ब्राउज़रों में प्रत्येक फ़ंक्शन के समर्थन की जांच करने की आवश्यकता है, जिन्हें आप लक्षित कर रहे हैं। यह नया है, समर्थन की कमी की संभावना या कार्य "छोटी गाड़ी" है।

+18

यहां प्रदर्शन में अंतर है: http://jsperf.com/getelementbyid-vs-queryselector हाँ, यह अविश्वसनीय रूप से बड़ा है! वैसे, मुझे यह जवाब पसंद है, क्योंकि यह बहुत छोटा है लेकिन अभी भी बहुत सारी जानकारी है। – thomas

+0

@ थॉमस आपका लिंक डाउन है। क्या कहीं भी एक कामकाजी लिंक है? – user5508297

+1

कई संग्रहीत संस्करण हैं: https://web.archive.org/web/20160108040024/http://jsperf.com/getelementbyid-vs-queryselector लेकिन परीक्षण वास्तव में बहुत पुराना है (2010), इसलिए परिणाम हो सकता है अधिक आधुनिक इंजन के साथ बहुत अलग है। – thomas

संबंधित मुद्दे